오버스크롤 동작
오버스크롤 동작 (Overscroll Behavior)
스크롤 영역의 경계에 도달했을 때 스크롤 체인이 어떻게 동작할지 정하는 유틸리티예요. CSS의 overscroll-behavior 속성을 조절해서 부모 요소의 스크롤 전파나 "바운스" 효과를 제어할 수 있어요.
출처: 문서
본문
클래스와 스타일
overscroll-auto—overscroll-behavior: auto;overscroll-contain—overscroll-behavior: contain;overscroll-none—overscroll-behavior: none;overscroll-x-auto—overscroll-behavior-x: auto;overscroll-x-contain—overscroll-behavior-x: contain;overscroll-x-none—overscroll-behavior-x: none;overscroll-y-auto—overscroll-behavior-y: auto;overscroll-y-contain—overscroll-behavior-y: contain;overscroll-y-none—overscroll-behavior-y: none;
부모 오버스크롤 막기
overscroll-contain 유틸리티를 쓰면 대상 영역에서의 스크롤이 부모 요소의 스크롤을 유발하지 않게 하면서도, 이를 지원하는 운영체제에서는 컨테이너 끝을 넘어 스크롤할 때의 "바운스" 효과는 유지해요.
<div class="overscroll-contain ...">Well, let me tell you something, ...</div>
오버스크롤 바운스 막기
overscroll-none 유틸리티를 쓰면 대상 영역에서의 스크롤이 부모 요소의 스크롤을 유발하지 않게 하면서, 컨테이너 끝을 넘어 스크롤할 때의 "바운스" 효과도 막아요.
<div class="overscroll-none ...">Well, let me tell you something, ...</div>
기본 오버스크롤 동작 사용하기
overscroll-auto 유틸리티를 쓰면 사용자가 기본 스크롤 영역의 경계에 도달했을 때 부모 스크롤 영역을 계속 스크롤할 수 있게 해요.
<div class="overscroll-auto ...">Well, let me tell you something, ...</div>
반응형 디자인
overscroll-behavior 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.
<div class="overscroll-auto md:overscroll-contain ...">
<!-- ... -->
</div>
변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.