AAtomic CSS

overscroll-behavior

스크롤 경계에 도달했을 때 부모 요소로의 스크롤 전파(scroll chaining)를 제어합니다. obc는 모달, 사이드바 등에서 부모 스크롤 전파와 pull-to-refresh를 방지하는 데 필수적입니다.

클래스 목록

클래스CSS설명
obauoverscroll-behavior: auto기본값. 스크롤 경계에서 부모로 전파
obcoverscroll-behavior: contain스크롤 전파 차단. 모달/사이드바 필수
obnoverscroll-behavior: none전파 + 바운스 효과 모두 차단
obxaoverscroll-behavior-x: auto수평 overscroll 기본값
obxcoverscroll-behavior-x: contain수평 스크롤 전파 차단
obxnoverscroll-behavior-x: none수평 전파 + 바운스 차단
obyaoverscroll-behavior-y: auto수직 overscroll 기본값
obycoverscroll-behavior-y: contain수직 스크롤 전파 차단
obynoverscroll-behavior-y: none수직 전파 + 바운스 차단

클래스별 상세

obauoverscroll-behavior: auto

브라우저 기본값입니다. 스크롤 경계에 도달하면 부모 요소로 스크롤이 전파됩니다. 일반적인 페이지에서는 이 기본 동작이 자연스럽습니다.

<!-- 기본 동작: 스크롤이 부모로 전파됨 -->
<div class="obau oya h20rem">
  <p>스크롤이 끝에 도달하면 부모 페이지가 스크롤됩니다.</p>
</div>

obcoverscroll-behavior: contain

스크롤 경계에 도달해도 부모 요소로 스크롤이 전파되지 않습니다. 모바일에서 pull-to-refresh도 방지합니다. 모달, 드롭다운, 사이드바 등 독립적인 스크롤 영역에 필수적으로 사용됩니다.

<!-- 모달: 스크롤 전파 차단 -->
<div class="modal pf t0 l0 w100p h100vh df jcc aic bg0-0-0-50">
  <div class="obc oya maxh80vh w50rem bg0F0F17 br8px p2rem">
    <h2>모달 콘텐츠</h2>
    <p>스크롤해도 뒤의 페이지가 움직이지 않습니다.</p>
  </div>
</div>

<!-- 사이드바: 독립 스크롤 영역 -->
<aside class="obc oya h100vh w25rem pf t0 l0 bg18181B p2rem">
  <nav>긴 메뉴 목록...</nav>
</aside>

가장 많이 쓰이는 클래스

obc는 overscroll-behavior에서 가장 자주 사용됩니다. 모달이 열려 있을 때 배경 페이지가 스크롤되는 문제를 해결합니다.

obnoverscroll-behavior: none

obc와 동일하게 스크롤 전파를 방지하면서, 추가로 바운스 효과(glow, rubber-banding)도 완전히 차단합니다.

<!-- 바운스 효과까지 완전 차단 -->
<div class="obn oya h30rem bg0F0F17 br8px p2rem">
  <p>iOS Safari의 rubber-banding 효과도 발생하지 않습니다.</p>
</div>

obxaobxcobxnoverscroll-behavior-x

수평 방향의 overscroll 동작만 개별 제어합니다. 가로 스크롤이 있는 캐러셀, 탭 등에서 좌우 스크롤 전파를 막을 때 사용합니다.

<!-- 가로 캐러셀: 좌우 스크롤 전파 방지 -->
<div class="obxc oxa df gap16px p16px">
  <div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
  <div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
  <div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
  <div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
</div>

obyaobycobynoverscroll-behavior-y

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

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

자주 쓰는 패턴

상황추천이유
모달 / 다이얼로그obc oya배경 페이지 스크롤 방지
사이드바 네비게이션obc oya메뉴 스크롤이 페이지에 영향 없음
드롭다운 메뉴obc oya메뉴 끝에서 페이지 스크롤 방지
가로 캐러셀obxc oxa좌우 끝에서 뒤로가기 방지
풀스크린 앱obnpull-to-refresh, 바운스 모두 차단

팁 & 주의사항

obc vs obn

대부분의 경우 obc로 충분합니다. obn은 바운스 효과까지 제거하므로, iOS Safari의 rubber-banding을 없애고 싶을 때 사용하세요.

overflow 필수

obc가 동작하려면 해당 요소에 스크롤이 발생해야 합니다. oa 또는 oya 등 overflow 속성과 함께 사용하세요.

overflowscroll-behaviortouch-action