overscroll-behavior: contain 속성 사용하기

웹에서 스크롤을 다루다보면 항상 마주치는 문제 중 하나가 스크롤 체이닝이다.

다음 예제를 보자.

위 예제에서 Box-1의 스크롤이 끝에 도달하게 되면 상위 요소인 App의 스크롤이 시작이된다.

심지어 App의 스크롤이 끝에 도달하게 되면 이 포스팅의 본문까지 스크롤이 시작되게 된다.

이러한 현상을 스크롤 체이닝이라고 불리며, 구글 개발자 사이트의 Take control of your scroll: customizing pull-to-refresh and overflow effects에 설명이 잘 되어있다.

여기서 설명하길 CSS의 overscroll-behavior속성을 사용하여 스크롤로 일어날 수 있는 다양한 현상을 조절할 수 있다고 한다.

단, 이 속성은 본문의 첫번째 단락에 주의로 크롬 63버전 이상부터 지원하며, 다른 브라우저는 고려 중이라고 작성되어있다.

overscroll-behavior-support

이제 예제에 overscroll-behavior 속성을 적용하여 스크롤 체이닝 현상을 피해보자.

overscroll-behavior 속성은 x, y도 따로 다룰 수 있다.

Box-1에서 스크롤을 끝까지 도달시켜보면 이전과 다르게 상위 요소인 App의 스크롤이 시작되지 않으면서 스크롤 체이닝을 피하게 된다.