[CSS] overscroll-behavior 속성 :: 마이구미

이 글은 CSS 속성 중 overscroll-behavior 에 대해 다룬다.
CSS 속성에 대한 공식 문서보다는 크롬 개발자 사이트에 존재하는 관련 글이 오히려 큰 도움이 된다.
이번 포스팅은 관련 글을 기반으로 정리한 내용이라고 볼 수 있다.
참고 자료 - https://developer.chrome.com/blog/overscroll-behavior/

 

overscroll-behavior 는 이름을 토대로 추측하면 다음과 같다.

"스크롤에 대한 행동" 을 제어하는 속성으로 추정된다.

스크롤 관련 속성으로 추정할 수 있지만, 아직 정확히 무엇인지 파악하기 힘들다.

흔한 스크롤 이슈를 먼저 파악해보자.

 

우리가 많이 스크롤에서 겪을 수 있는 이슈는 무엇일까?

가장 흔한 경우는 스크롤 영역이 2개 이상이면서 중첩되는 경우이다.

 

 

위 예저처럼 채팅창에서 스크롤이 top = 0 또는 bottom = 0 이 되면 뒤에 있는 리스트 영역의 스크롤이 이동하게 된다.

이처럼 스크롤 이벤트가 전파되어 상위 컨테이너에서 동작하게 되는 것은 브라우저가 가지는 기본적인 행동이다.

이렇게 스크롤 이벤트가 상위로 전파하는 행동을 스크롤 체이닝(scroll chaining) 이라고 부른다.

 

어떤 측면에서는 굉장히 유용해보인다.

하지만 다른 측면에서는 예상치 못한 행동일 수 있고, 원치 않은 결과를 초래할 수 있다.

이를 위해 우리는 스크롤 체이닝을 방지하고 싶을 수 있다.

 

overscroll-behavior 속성은 이러한 상황을 제어할 수 있다.

속성의 값은 다음과 같다.

• auto - 기본 값. 상위로 스크롤 이벤트를 전파한다.
• contain - 스크롤 체이닝을 막는다.
• none - 스크롤 체이닝을 막는다.

 

(contain 과 none 의 차이는 아래에서 다룰 것이다.)

container 또는 none 으로 설정하면 위에서 발생한 이슈를 해결할 수 있게 된다.

 

 

이처럼 스크롤 체이닝을 막아 이슈를 해결할 수 있다.

 

제시한 예제 케이스에 한해서, 스크롤 체이닝을 막아 문제를 해결했다.

하지만 우리는 의문이 들 수 있다.

 

스크롤 체이닝을 막아서 발생하는 부작용은 없는가?

대부분의 브라우저는 모바일 웹에서의 PullToRefresh 기능을 기본적으로 탑재하고 있다.

스크롤 최상단에서 끌어내리는(Swipe Down) 제스처를 통해 새로고침을 할 수 있는 기능을 PullToRefresh 이라고 불린다.

 

그런데 만약 overscroll-behavior: container 또는 none 사용시에는 PullToRefresh 기능이 비활성화가 된다.

반대로 PullToRefresh 기능을 막고 싶다면, 이를 활용할 수 있다.

결국 우리는 이 속성이 PullToRefresh 기능에 영향을 줄 수 있다는 것을 인지해야한다.

PullToRefresh 에 대해 좀 더 자세한 내용은 아래에 있는 관련 글을 참고바란다.

https://mygumi.tistory.com/423

읽고 오면 속성을 이해하는데 더 큰 도움이 될 것이다.

 

그렇다면, overscroll-behavior 속성 값 contain 과 none 의 차이는 무엇인가?

지금까지는 "스크롤 체이닝"이라는 곳에 중점을 두었다.

이번에는 속성 이름 그대로 "스크롤 행동(overscroll behavior)"에 중점을 두어야한다.

스크롤 행동은 Andorid, IOS 환경의 브라우저에서 볼 수 있는 이펙트를 이해하면된다.

 

모바일 웹 환경에서 스크롤 제스처를 통해 최상단 or 최하단에서 대해 특정 이펙트가 발생한다.

Android 에서는 "Glow Effect", IOS 에서는 "Rubberbanding Effect" 로 분류된다.

 

이미지 참고

 

위와 같은 이펙트의 노출 여부를 contain 또는 none 으로 결정할 수 있다.

overscroll-behavior: contain 값은 이펙트가 노출되고, 반대(none)는 노출되지않는다.

 

---

글에서 다룬 내용들의 예제가 존재한다.

이펙트와 같은 예제들은 모바일 기기 환경에서 노출되니 기기에서 확인해야한다.

(PullToRefresh 지원이 안되는 브라우저 환경이 있으니 그냥 크롬에서 확인하는 걸 추천한다.)

 

1_scroll_chaining.html

=> 스크롤 이벤트 상위로 전파되는 이슈

2_disable_scroll_chaining.html

=> 스크롤 체이닝 막아서 1번 이슈를 해결

3_ptr.html

=> 브라우저 기본 PullToRefresh 기능과 직접 구현되어있는 PullToRefresh 기능을 사용 + 이펙트를 활성화

4_disable_ptr.html

=> 브라우저 기본 PullToRefresh 기능을 막고 직접 구현되어있는 PullToRefresh 기능을 사용 + 이펙트를 활성화

5_disable_ptr_effect.html

=> 브라우저 기본 PullToRefresh 기능을 막고 직접 구현되어있는 PullToRefresh 기능을 사용+ 이펙트를 비활성화