CSS의 overscroll-behavior 속성을 사용하면 웹 페이지의 경계 영역, 즉 스크롤이 끝에 도달했을 때 브라우저가 어떻게 반응할지 직접 제어할 수 있습니다. 이 속성을 활용하면 모바일 브라우저에서 흔히 볼 수 있는 당겨서 새로고침(Pull-to-Refresh) 기능을 간단하게 비활성화할 수 있습니다.
overscroll-behavior 속성의 기본 문법
Selector {
overscroll-behavior: /*value*/
}주요 속성값
- auto : 기본값입니다. 스크롤 연쇄(scroll chaining)와 당겨서 새로고침 등 브라우저의 오버스크롤 효과가 모두 허용됩니다.
- contain : 동일 문서 내에서의 스크롤 연쇄는 막지만, 당겨서 새로고침처럼 브라우저 자체가 제공하는 효과는 그대로 유지됩니다.
- none : 스크롤 연쇄와 오버스크롤 효과를 모두 차단합니다. 이 값을 사용하면 당겨서 새로고침 기능이 비활성화됩니다.
참고로 이 속성은 Chrome 63+, Firefox 59+, Edge 18+ 등 주요 브라우저에서 지원되며, Safari는 16 버전부터 사용할 수 있습니다.
예제 1 : 개별 요소에 overscroll-behavior-y 적용하기
아래 예제는 가로 스크롤이 가능한 div 요소에 overscroll-behavior-y: contain;을 적용한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
width: 500px;
height: 200px;
overflow-x: auto;
overscroll-behavior-y: contain;
background-color: plum;
}
p {
font-size: 1.5em;
}
</style>
</head>
<body>
<h2>overscroll-behavior example</h2>
<div>
<p>Pellentesque id velit non metus lacinia viverra ac congue enim. Morbi lacinia, erat nec cursus semper, arcu est scelerisque mi, eget hendrerit risus tellus ut lacus. Nunc dapibus risus quis magna posuere, ac malesuada odio ornare. Aliquam commodo dolor ipsum, at finibus libero laoreet non. Etiam mollis placerat aliquam. Maecenas gravida congue dui non hendrerit. Suspendisse varius eros id purus facilisis, sit amet sollicitudin sapien dictum.</p>
</div>
<p>
Vestibulum ultricies diam sit amet laoreet sollicitudin. Nulla facilisis porttitor eros non sagittis. Donec rutrum a erat vitae interdum. Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida. Proin ut diam eros. Donec hendrerit euismod dui ac facilisis. Duis sodales urna dui, vitae imperdiet augue dictum tristique. Vivamus a risus enim. Donec fermentum iaculis rutrum. Nullam quis quam purus. Suspendisse potenti. Phasellus scelerisque scelerisque metus eu tristique. Nulla vitae augue non felis finibus aliquet. In ipsum elit, egestas ut arcu nec, commodo vehicula sapien. Suspendisse potenti.
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2 : body 요소에 overscroll-behavior 설정하기
다음은 문서 전체에 해당하는 body 요소에 overscroll-behavior: contain;을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
overscroll-behavior: contain;
text-align: center;
}
div {
margin: 2%;
width: 450px;
height: 180px;
overflow-x: auto;
background-color: khaki;
}
p {
font-size: 1.3em;
}
</style>
</head>
<body>
<h2>setting overscroll behavior to body</h2>
<div>
<p>Pellentesque id velit non metus lacinia viverra ac congue enim. Morbi lacinia, erat nec cursus semper, arcu est scelerisque mi, eget hendrerit risus tellus ut lacus. Nunc dapibus risus quis magna posuere, ac malesuada odio ornare. Aliquam commodo dolor ipsum, at finibus libero laoreet non. Etiam mollis placerat aliquam. Maecenas gravida congue dui non hendrerit. Suspendisse varius eros id purus facilisis, sit amet sollicitudin sapien dictum.</p>
</div>
<p>
Vestibulum ultricies diam sit amet laoreet sollicitudin. Nulla facilisis porttitor eros non sagittis. Donec rutrum a erat vitae interdum. Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida. Proin ut diam eros. Donec hendrerit euismod dui ac facilisis. Duis sodales urna dui, vitae imperdiet augue dictum tristique. Vivamus a risus enim. Donec fermentum iaculis rutrum. Nullam quis quam purus. Suspendisse potenti. Phasellus scelerisque scelerisque metus eu tristique. Nulla vitae augue non felis finibus aliquet. In ipsum elit, egestas ut arcu nec, commodo vehicula sapien. Suspendisse potenti.
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
모바일 브라우저에서 확인한 실행 결과는 다음과 같습니다.
