overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법

웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제를 한번 다뤄보도록 하겠습니다.

See the Pen BajEOGZ by ruden (@ruden91) on CodePen.

 

예시를 보면 overscroll-behavior 속성이 auto로 설정된 기본값 영역은 스크롤 영역이 모두 끝나면 부모 스크롤 영역이 움직이기 시작합니다. 이것을 스크롤 체이닝(스크롤이 연결되어 있기 때문에 체이닝이라는 단어를 사용)이라고 합니다. 하지만 overscroll-behavior 속성이 contain 값인 경우에는 어떻게 동작할까요? contain 값을 적용한 스크롤 영역은 스크롤 체이닝이 적용되지 않고 우리가 스크롤한 스크롤 영역만 움직이는 것을 알 수 있습니다.

상세

overscroll-behavior 속성에서 사용할 수 있는 값과 사용하는 방법입니다.

/* Keyword values */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;

/* Two values */
overscroll-behavior: auto contain;

/* Global values */
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: unset;

예시

overscroll-behavior 속성을 이용한 구현 예시입니다. left 사이드바와 right 사이드바가 독립적으로 스크롤 영역을 가지고 있고, body에도 스크롤 영역을 가지고 있습니다.

기존에 스크롤 체이닝이 적용되면 사이드 스크롤 영역이 끝나면 body 스크롤이 동작하지만 overscroll-behavior 속성을 활용하면 스크롤 체이닝이 적용되지 않고, 스크롤 영역은 각각 독립적으로 적용되는 것을 확인할 수 있습니다.

See the Pen qBbwMzE by ruden (@ruden91) on CodePen.

브라우저 호환성 (Browser Support)

Desktop

Chrome 65

Firefox 59

IE 11

Edge 79

Safari No

Mobile

Android Chrome 84

Android Firefox No

Android 81

iOS Safari No