AAtomic CSS

overscroll-behavior-x

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

클래스 목록

클래스CSS설명
obxaoverscroll-behavior-x: auto기본값. 수평 스크롤 경계에서 부모로 전파
obxcoverscroll-behavior-x: contain수평 스크롤 전파 차단
obxnoverscroll-behavior-x: none수평 전파 + 바운스 효과 모두 차단

사용 예시

<!-- 가로 캐러셀: 좌우 스크롤 전파 방지 -->
<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>

<!-- 가로 탭 스크롤: 뒤로가기 제스처 방지 -->
<nav class="obxc oxa df gap8px wsn">
  <a class="fs0 py8px px16px bg18181B br4px cFFFFFF tdn">Tab 1</a>
  <a class="fs0 py8px px16px bg18181B br4px cFFFFFF tdn">Tab 2</a>
  <a class="fs0 py8px px16px bg18181B br4px cFFFFFF tdn">Tab 3</a>
</nav>

팁 & 주의사항

브라우저 뒤로가기 방지

가로 스크롤 끝에서 브라우저의 뒤로가기/앞으로가기 제스처가 발동되는 것을 obxc로 방지할 수 있습니다.

overscroll-behavioroverscroll-behavior-yoverflow