[오버스크롤 동작] ios 모바일 스크롤 바운스 막기 / 스크롤 체이닝 막기

기본적으로 모바일 브라우저는 페이지의 상단 또는 하단에 도달하면 바운스효과(ios) 또는 페이지 새로고침을 제공합니다.

(크롬, 사파리)

 

안드로이드 일경우 상단 스크롤 경계에 부딪히면 빛이 납니다.(글로우 효과)

 

스크롤 콘텐츠 페이지 위에 스크롤 콘텐츠가 있는 대화 상자가 있는 경우 대화 상자의 스크롤 경계에 도달하면 기본 페이지가 스크롤되기 시작합니다. 이를 scroll chaining 스크롤 체이닝 이라고 합니다.

 

이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. (스크롤 박스에만 적용되는 속성)

 

overscroll-behavior: auto;

기본값, 요소에서 시작된 스크롤은 상위 요소로 전달

(상자의 스크롤 경계에 도달하면 기본 페이지가 스크롤되기 시작)

예시화면 참고: https://developer.chrome.com/blog/overscroll-behavior/#the-chatbox-scenario

 

 

overscroll-behavior: contain;

스크롤 체인을 방지, 요소에서 시작된 스크롤은 상위 요소로 전달 되지않음,  iOS의 바운스효과 (러버밴딩 효과) 있음.

 

※ 레이어 팝업시 사용하면 될듯합니다. 기존에 저는 스크립트로 레이어 팝업이 뜨면 뒤에있는 기본페이지에 position:fixed를 넣었는데,  css만으로 가능한것 같습니다!

예시화면 참고: https://developer.chrome.com/blog/overscroll-behavior/#the-page-overlay-scenario

 

 

overscroll-behavior: none;

스크롤 체인을 방지, 요소에서 시작된 스크롤은 상위 요소로 전달 되지않음,  iOS의 바운스효과 (러버밴딩 효과) 없음.

저는 이제 모바일 작업시 #wrap에 꼭 넣어두는 속성입니다.

예시화면 참고: https://developer.chrome.com/blog/overscroll-behavior/#disabling-overscroll-glow-and-rubberbanding-effects