AAtomic CSS

overscroll-behavior-x

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

클래스 목록

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

라이브 데모

두 예제 모두 바깥쪽 상자와 안쪽 상자가 각각 가로로 스크롤됩니다. 안쪽 상자를 오른쪽 끝까지 스크롤한 뒤 계속 밀어보세요. 왼쪽은 바깥 상자가 따라 움직이고(스크롤 체이닝), 오른쪽은 안쪽에서 멈춥니다.

기본값 (auto) — 클래스 없음

이 안쪽 줄은 상자보다 넓어서 가로로 스크롤됩니다. 오른쪽 끝까지 밀어본 다음, 멈추지 말고 계속 밀어보세요. 두 예제의 차이가 바로 여기서 드러납니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

안쪽 스크롤이 끝에 닿으면 그 움직임이 바깥 스크롤 컨테이너로 넘어갑니다.

전파 차단 — obxc

이 안쪽 줄은 상자보다 넓어서 가로로 스크롤됩니다. 오른쪽 끝까지 밀어본 다음, 멈추지 말고 계속 밀어보세요. 두 예제의 차이가 바로 여기서 드러납니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

바깥 채움 영역 — 바깥 상자도 가로로 스크롤되도록 폭을 넓히는 역할만 합니다.

안쪽 스크롤이 끝에 닿아도 바깥 컨테이너는 움직이지 않습니다. 캐러셀이 페이지를 끌고 다니는 문제가 사라집니다.

클래스별 상세

obxaoverscroll-behavior-x: auto

브라우저 기본 동작입니다. 가로 스크롤이 끝에 도달하면 남은 스크롤 양이 부모 스크롤 컨테이너로 전달되고, 부모가 없으면 브라우저의 좌우 스와이프 내비게이션이나 고무줄 효과가 발생합니다.

언제 쓰나

이미 다른 곳에서 obxc나 obxn이 걸려 있는 요소의 동작을 다시 기본값으로 되돌릴 때 씁니다. 새로 만드는 요소에는 굳이 붙일 필요가 없습니다.

<!-- Default: horizontal scroll chains to the parent scroller -->
<div class="obxa oxa df gap16px p16px">
  <div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
  <div class="fs0 w28rem h20rem bg6366F1 br8px"></div>
</div>

obxcoverscroll-behavior-x: contain

가로 스크롤이 끝에 도달해도 남은 스크롤 양을 부모로 넘기지 않습니다. 다만 해당 요소 자체의 고무줄(바운스) 효과는 그대로 유지됩니다.

언제 쓰나

가로 캐러셀, 가로 탭 바, 좌우로 넓은 표처럼 페이지 안에 가로 스크롤 영역을 넣을 때의 기본 선택지입니다. 사용자가 끝까지 밀었을 때 페이지가 딸려 움직이거나 뒤로가기가 발동하는 사고를 막아 줍니다.

<!-- Carousel that keeps horizontal scroll to itself -->
<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>

obxnoverscroll-behavior-x: none

전파를 막는 것에 더해, 요소 자체의 고무줄 효과와 좌우 스와이프 내비게이션까지 모두 차단합니다.

언제 쓰나

지도, 캔버스, 키오스크 화면처럼 브라우저 기본 제스처가 전혀 개입하면 안 되는 몰입형 영역에 씁니다. 일반적인 캐러셀에는 과합니다.

<!-- Kiosk style viewer: no chaining and no rubber band -->
<div class="obxn oxa w100p h40rem bg0F0F17 br8px">
  <div class="minw120rem h40rem"></div>
</div>

사용 예시

가로 스크롤 캐러셀과 탭 바에서 좌우 전파를 막는 기본 형태입니다.

<!-- Horizontal carousel: prevent left/right scroll propagation -->
<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>

<!-- Horizontal tab scroll: prevent back gesture -->
<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>

가로로 넓은 데이터 표를 감싸는 래퍼입니다. 표를 끝까지 밀어도 페이지가 옆으로 움직이거나 뒤로가기가 발동하지 않습니다.

<!-- Wide data table inside a page that also scrolls sideways -->
<div class="obxc oxa w100p b1pxsolid27272A br8px">
  <table class="minw60rem bcc w100p fs14px">
    <thead>
      <tr>
        <th class="tal py12px px16px bg18181B cA1A1AA wsn">Order</th>
        <th class="tal py12px px16px bg18181B cA1A1AA wsn">Customer</th>
        <th class="tal py12px px16px bg18181B cA1A1AA wsn">Shipping address</th>
        <th class="tal py12px px16px bg18181B cA1A1AA wsn">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="py12px px16px bb1pxsolid27272A wsn">A-10231</td>
        <td class="py12px px16px bb1pxsolid27272A wsn">Jane Doe</td>
        <td class="py12px px16px bb1pxsolid27272A wsn">120 Long Street, Springfield</td>
        <td class="py12px px16px bb1pxsolid27272A wsn">Shipped</td>
      </tr>
    </tbody>
  </table>
</div>

팁 & 주의사항

브라우저 뒤로가기 방지

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

스크롤 가능한 요소에만 의미가 있습니다

overscroll-behavior-x는 그 요소가 실제로 가로 스크롤 컨테이너일 때만 동작합니다. oxa 같은 overflow 클래스를 함께 주지 않으면 아무 효과도 없습니다.

contain과 none의 차이

obxc는 부모로의 전파만 막고 자기 자신의 바운스는 남깁니다. obxn은 바운스까지 없앱니다. 대부분의 UI에는 contain이 적절합니다.

축이 헷갈릴 때

가로 캐러셀 안에서 세로 스크롤도 함께 막고 싶다면 축별 클래스 대신 양축을 한 번에 처리하는 obc를 쓰는 편이 간단합니다.

overscroll-behavioroverscroll-behavior-yoverflow-xoverflowtouch-action