AAtomic CSS

overscroll-behavior-y

수직 방향의 overscroll 동작을 개별 제어합니다. 세로 스크롤 영역에서 부모로의 수직 스크롤 전파를 선택적으로 막을 때 사용합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
obyaoverscroll-behavior-y: auto기본값. 수직 스크롤 경계에서 부모로 전파
obycoverscroll-behavior-y: contain수직 스크롤 전파 차단
obynoverscroll-behavior-y: none수직 전파 + 바운스 효과 모두 차단

사용 예시

<!-- Modal: block only vertical scroll propagation -->
<div class="obyc oya h30rem bg0F0F17 br8px p2rem">
  <p>Vertical scroll does not propagate to parent at the end.</p>
  <p>Horizontal scroll maintains default behavior.</p>
</div>

<!-- Prevent pull-to-refresh -->
<body class="obyc">
  <main class="oya h100vh">
    Pull-to-refresh does not work on mobile.
  </main>
</body>

<!-- Chat area: independent scroll -->
<div class="chat-messages obyc oya h50rem bg18181B p16px">
  <div>Message 1</div>
  <div>Message 2</div>
  <div>Message 3</div>
</div>

팁 & 주의사항

모바일 pull-to-refresh 방지

obyc를 페이지 최상위에 적용하면 모바일 브라우저의 당겨서 새로고침(pull-to-refresh)을 차단할 수 있습니다.

overscroll-behavioroverscroll-behavior-xoverflow