css - overscroll-behavior

overscroll-behavior

1. 스크롤 체이닝

• 스크롤 영역이 2개 이상이 되면 자식 요소의 스크롤이 끝 지점에
  도달 할 경우 부모의 스크롤이 움직이게 된다.
• 이처럼 스크롤 이벤트가 전파되어 상위 컨텐츠가 스크롤 되는 것은
  브라우저가 가지는 기본 원리이며, 이것을 스크롤 체이닝(scroll chaining)이라고 부른다.

2. 속성 값

• auto: 기본 값이며 스크롤 이벤트가 전파된다.
• contain: 스크롤 체이닝 방지
• none: 스크롤 체이닝 방지

3. contain과 none의 차이점?

• contain과 none의 차이점은 모바일 기기에서 확인할 수 있다.
• 스크롤을 통해 최상단으로 갈 경우 모바일 기기에서 작은 이펙트 효과를 볼 수 있는데 이러한 효과 마저 없애고자 하면 none을 사용하면 된다.
• 아래의 링크를 참고하면 이해하기 쉽다.
  

Disabling overscroll glow and rubberbanding effects
https://developer.chrome.com/blog/overscroll-behavior/#disabling-overscroll-glow-and-rubberbanding-effects