AAtomic CSS

overflow-y

수직(세로) 방향의 오버플로우만 제어합니다. 스크롤 가능한 콘텐츠 영역(사이드바, 모달, 채팅)에 가장 많이 사용되는 오버플로우 방향입니다.

클래스 목록

클래스CSS설명
oyvoverflow-y: visible기본값. 넘치는 콘텐츠가 그대로 보임
oyhoverflow-y: hidden넘치는 콘텐츠를 잘라서 숨김
oysoverflow-y: scroll항상 세로 스크롤바 표시
oyaoverflow-y: auto넘칠 때만 세로 스크롤바 표시
oycoverflow-y: clip숨기되 스크롤 영역도 생성하지 않음

시각적 비교

높이가 제한된 컨테이너에서 각 값의 동작을 비교합니다.

Hidden — oyh

첫 번째 줄

두 번째 줄

세 번째 줄

네 번째 줄

다섯 번째 줄

여섯 번째 줄

일곱 번째 줄

여덟 번째 줄

넘치는 부분이 잘려서 보이지 않음

Auto — oya

첫 번째 줄

두 번째 줄

세 번째 줄

네 번째 줄

다섯 번째 줄

여섯 번째 줄

일곱 번째 줄

여덟 번째 줄

넘칠 때만 세로 스크롤바가 나타남

Scroll — oys

첫 번째 줄

두 번째 줄

세 번째 줄

네 번째 줄

다섯 번째 줄

여섯 번째 줄

일곱 번째 줄

여덟 번째 줄

항상 세로 스크롤바가 표시됨

Clip — oyc

첫 번째 줄

두 번째 줄

세 번째 줄

네 번째 줄

다섯 번째 줄

여섯 번째 줄

일곱 번째 줄

여덟 번째 줄

숨기되 프로그래밍 스크롤도 불가

사용 예시

<!-- 스크롤 가능한 사이드바 -->
<aside class="oya h100vh ps t0 l0 w25rem p2rem">
  <nav>긴 메뉴 목록...</nav>
</aside>

<!-- 고정 높이 채팅 영역 -->
<div class="oya maxh40rem p16px bg18181B br8px">
  <div>메시지 1</div>
  <div>메시지 2</div>
  <!-- ... 많은 메시지 -->
</div>

<!-- 모달 본문 스크롤 -->
<div class="oya maxh60vh p2rem">
  긴 모달 콘텐츠...
</div>

팁

oya vs oys

oya는 콘텐츠가 넘칠 때만 스크롤바를 표시하고, oys는 항상 스크롤바를 표시합니다. 대부분의 경우 oya가 적합합니다.

overflowoverflow-xmax-height