퍼블리셔가 알아두면 좋은 '스크롤' 관련 속성✨
overscroll-behavior
사용자가 스크롤을 끝까지 했을 때 나타나는 기본 브라우저 동작(바운스 효과, 부모 요소로의 스크롤 전파 등) 을 제어하는 CSS 속성이다.
| 🔥 값 | 설명 |
|---|---|
| auto (default) | 기본 브라우저 동작 유지 |
| contain | 스크롤이 부모 요소로 전달되지 않음 |
| none | 스크롤 바운스 효과 및 부모로의 전파 모두 차단 |
부모에도 스크롤이 있고, 그 안에 자식 요소도 스크롤을 갖고있다고 가정해보자.
자식 요소의 스크롤을 끝까지 내렸을 때, 스크롤은 더이상 내려갈 곳이 없어 스크롤이 되지 않아야하지만 엉뚱하게 바깥 부모의 스크롤이 같이 딸려 내려가는 걸 볼 수 있다.
위처럼 내부 요소의 스크롤이 끝에 도달한 경우, 외부 스크롤에 전파되지 않도록 하고 싶다면 overscroll-behavior 을 사용하면 된다.
보통 overscroll-behavior: contain; 을 많이 쓰는 편!
이 css를 적용하면 내부에서 스크롤이 끝까지 가더라도 부모 요소로 스크롤이 전달되지 않는다.
overscroll-behavior: none; 을 사용하면
모바일 기기에서 웹페이지를 스크롤 끝까지 해도 바운스(튕기는) 효과가 발생하지 않는다.
💡 언제 사용하면 좋을까?
- 모달 창이나 사이드바에서 내부 스크롤이 부모로 전파되는 걸 막을 때
- 모바일에서 바운스 효과를 제거하고 싶을 때
- 중첩된 스크롤이 있는 경우(채팅창, 드롭다운 목록 등)
나혼자만 윈도우UP💻