AAtomic CSS

overscroll-behavior-y

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

클래스 목록

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

라이브 데모

바깥 상자와 안쪽 상자가 각각 세로로 스크롤됩니다. 안쪽 상자를 맨 아래까지 스크롤한 뒤 멈추지 말고 계속 스크롤해 보세요. 왼쪽은 바깥 상자가 이어서 움직이고(스크롤 체이닝), 오른쪽은 안쪽에서 멈춥니다.

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

바깥 컨테이너의 내용입니다. 바깥 상자가 세로로 스크롤되도록 높이를 채우는 역할입니다.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

바깥 컨테이너의 내용입니다. 바깥 상자가 세로로 스크롤되도록 높이를 채우는 역할입니다.

바깥 컨테이너의 내용입니다. 바깥 상자가 세로로 스크롤되도록 높이를 채우는 역할입니다.

안쪽 스크롤이 끝에 닿으면 남은 스크롤이 바깥 컨테이너로 넘어갑니다. 실제 서비스에서는 모달 안에서 스크롤하다가 뒤 페이지가 밀려 내려가는 현상으로 나타납니다.

전파 차단 — obyc

바깥 컨테이너의 내용입니다. 바깥 상자가 세로로 스크롤되도록 높이를 채우는 역할입니다.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

안쪽 스크롤 영역의 내용입니다. 아래 끝까지 스크롤한 다음 그대로 한 번 더 스크롤해 보세요.

바깥 컨테이너의 내용입니다. 바깥 상자가 세로로 스크롤되도록 높이를 채우는 역할입니다.

바깥 컨테이너의 내용입니다. 바깥 상자가 세로로 스크롤되도록 높이를 채우는 역할입니다.

안쪽 스크롤이 끝에 닿아도 바깥 컨테이너는 그대로 있습니다. 모달이나 채팅 패널이 뒤 페이지를 밀지 않습니다.

클래스별 상세

obyaoverscroll-behavior-y: auto

브라우저 기본 동작입니다. 세로 스크롤이 끝에 도달하면 남은 스크롤 양이 부모 스크롤 컨테이너나 페이지로 전달되고, 모바일에서는 당겨서 새로고침과 고무줄 효과가 함께 나타납니다.

언제 쓰나

상위에서 obyc나 obyn이 상속처럼 적용된 구조에서 특정 영역만 기본 동작으로 되돌릴 때 씁니다.

<!-- Default: vertical scroll chains to the page -->
<div class="obya oya h30rem bg0F0F17 br8px p2rem">
  <p>Reaching the bottom continues scrolling the page.</p>
</div>

obycoverscroll-behavior-y: contain

세로 스크롤이 끝에 도달해도 남은 스크롤 양을 부모나 페이지로 넘기지 않습니다. 요소 자체의 바운스 효과는 유지됩니다.

언제 쓰나

모달 본문, 사이드바, 드롭다운 목록, 채팅 메시지 영역처럼 페이지 위에 얹히는 세로 스크롤 영역의 기본 선택지입니다. 자바스크립트로 body 스크롤을 잠그는 우회책 대부분을 대체할 수 있습니다.

<!-- Chat panel that keeps its scroll to itself -->
<div class="obyc oya h50rem bg18181B br8px p16px">
  <div class="mb12px">Message 1</div>
  <div class="mb12px">Message 2</div>
  <div class="mb12px">Message 3</div>
</div>

obynoverscroll-behavior-y: none

전파를 막는 것에 더해 요소 자체의 바운스 효과와 당겨서 새로고침까지 차단합니다.

언제 쓰나

네이티브 앱처럼 보여야 하는 전체 화면 웹앱의 루트 스크롤 영역에 씁니다. 일반 문서형 페이지에 쓰면 사용자가 기대하는 새로고침 제스처를 빼앗게 됩니다.

<!-- App shell: no chaining, no pull-to-refresh, no bounce -->
<main class="obyn oya h100vh bg0F0F17">
  <section class="p2rem">App content</section>
</main>

사용 예시

세로 스크롤 전파를 막는 기본 형태입니다.

<!-- 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>

모달 본문에 적용한 형태입니다. 본문 스크롤이 위아래 끝에 닿아도 뒤 페이지가 움직이지 않습니다.

<!-- Modal body that must never scroll the page behind it -->
<div class="pf t0 l0 w100p h100vh bg0-0-0-50 df jcc aic zi100">
  <div class="w50rem maxw100p bg0F0F17 b1pxsolid27272A br12px oh">
    <header class="py16px px2rem bb1pxsolid27272A">
      <h2 class="fs2rem fw700 cFAFAFA">Terms of service</h2>
    </header>

    <!-- obyc keeps the wheel inside this body once it hits top or bottom -->
    <div class="obyc oya maxh50vh py16px px2rem fs14px cA1A1AA lh1-7">
      <p class="mb16px">Long agreement text...</p>
      <p class="mb16px">Long agreement text...</p>
    </div>

    <footer class="py16px px2rem bt1pxsolid27272A df jcfe gap8px">
      <button class="py8px px16px bg18181B cFAFAFA br8px bn cp">Cancel</button>
      <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Agree</button>
    </footer>
  </div>
</div>

팁 & 주의사항

모바일 pull-to-refresh 방지

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

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

overscroll-behavior-y는 그 요소가 실제로 세로 스크롤 컨테이너일 때만 동작합니다. oya 같은 overflow 클래스와 높이 제한이 함께 있어야 하고, 내용이 넘치지 않으면 아무 일도 일어나지 않습니다.

contain과 none의 차이

obyc는 부모로의 전파만 막고 자기 자신의 바운스는 남깁니다. obyn은 바운스와 당겨서 새로고침까지 없앱니다. 모달과 채팅 패널에는 contain으로 충분합니다.

body 스크롤 잠금의 대안

모달을 열 때 body에 overflow hidden을 걸었다가 스크롤 위치가 튀는 문제를 겪었다면, 모달 본문에 obyc를 주는 쪽이 더 간단하고 부작용도 적습니다.

overscroll-behavioroverscroll-behavior-xoverflow-yoverflowtouch-action