AAtomic CSS

overscroll-behavior-y

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

클래스 목록

클래스CSS설명
obyaoverscroll-behavior-y: auto기본값. 수직 스크롤 경계에서 부모로 전파
obycoverscroll-behavior-y: contain수직 스크롤 전파 차단
obynoverscroll-behavior-y: none수직 전파 + 바운스 효과 모두 차단

사용 예시

<!-- 모달: 세로 스크롤만 전파 차단 -->
<div class="obyc oya h30rem bg0F0F17 br8px p2rem">
  <p>세로 스크롤 끝에서 부모로 전파되지 않습니다.</p>
  <p>가로 스크롤은 기본 동작을 유지합니다.</p>
</div>

<!-- pull-to-refresh 방지 -->
<body class="obyc">
  <main class="oya h100vh">
    모바일에서 당겨서 새로고침이 동작하지 않습니다.
  </main>
</body>

<!-- 채팅 영역: 독립 스크롤 -->
<div class="chat-messages obyc oya h50rem bg18181B p16px">
  <div>메시지 1</div>
  <div>메시지 2</div>
  <div>메시지 3</div>
</div>

팁 & 주의사항

모바일 pull-to-refresh 방지

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

overscroll-behavioroverscroll-behavior-xoverflow