https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
developer.mozilla.org
사이드 프로젝트를 하다가 찾게 되어 알게 된 css property이다
화면을 만들다 보면 overflow: scroll 를 적용하여 스크롤이 생기는 구역이 둘 이상 생기곤 한다.
나의 경우에는 채팅창을 만들고 나서 생긴 이슈였는데, 채팅 레이아웃의 스크롤을 끝까지 다 내리고 더 스크롤을 하니 채팅 레이아웃 바깥의 브라우저의 스크롤이 작동했던 것이다.
바깥의 스크롤이 이동했을 때 채팅창의 위치는 당연히 우하단 고정으로 유지되어야 했지만 이 내용은 차치하고, 다른 경우에도 이런 일이 있지 않게 하기 위해 스크롤을 현재 스크롤하고 있는 엘리먼트 내부에 한정시키는 방법을 찾게 되었다.
scroll-behavior를 처음 찾았지만 해당 속성은 스크롤 이벤트 발생 시 부드럽게/바로 이동하는 설정이었다.
그러다 overscroll-behavior를 알게 되었고, 'contain'으로 해당 속성을 설정 시 scroll이 그 안에서만 일어나는 것을 확인할 수 있었다.
overscroll-behavior: 'auto' | 'contain' | 'none';
- auto: 기본값으로 스크롤의 끝에 다다르면 그 밖의 스크롤이 이동한다
- contain: 'overscroll' 동작에 대해 해당 컨테이너 밖의 스크롤이 동작하지 않는다
- none: 'overscroll' 동작에 대해 해당 컨테이너 밖의 스크롤이 동작하지 않을 뿐만 아니라, 해당 동작에 딸린 화면 변화 등도 발생하지 않는다 (브라우저가 가진 기본 넘침 동작 등 - 끝에 도달 시 살짝 튕기는 화면변화 같은 것)
이 속성은 다시 X축과 Y축 각각 따로 적용할 수도 있다.
overscroll-behavior-x, overscroll-behavior-y