개발한 웹사이트에 모바일로 접속했을 때 아이폰의 경우 맨 위로 스크롤하면 새로고침되는 문제가 발생했다.
해당 페이지에서는 상단에서 스크롤을 통해 새로고침이 되는 것이 어색했기 때문에 overscroll-behavior 속성을 통해 제어하게 되었다.
스크롤 체이닝이란?
웹 페이지에서 스크롤링을 할 때 여러 개의 스크롤 가능한 영역이 하나의 스크롤 영역처럼 연속적으로 동작하는 기능
- 사용자가 첫 번째 스크롤 가능한 영역에서 스크롤을 하다가 끝에 도달하면 다음 스크롤이 가능한 영역으로 자연스럽게 연결되는 기능
최상단으로 스크롤 당겨서 새로고침
모바일 브라우저에서 ios의 경우 페이지의 상단 또는 하단에 도달하면 바운스효과가 나타남
안드로이드의 경우 바운스효과가 아닌 상단 스크롤 경계에 부딪히면 빛이 나는 효과가 나타남
overscroll-behavior
컨테이너 (페이지 자체 포함)를 오버스크롤할 때 발생하는 동작을 제어하는 CSS
-
overcroll-behavior: auto;// 기본값 -
overscroll-behavior: contain;// 스크롤 체이닝 막음 + 당겨서 새로고침 중지(그러나 바운스 효과는 유지) -
overscroll-behavior: none;// contain + 바운스 효과를 사용 중지
참고 사이트
안녕하세요! 나랭입니다😉