CSS로 간단하게 모바일 스크롤 시 새로고침 막기

 

 

ㅁ 들어가며

 

 지난 글에서 발자취를 따라서라는 안드로이드 웹앱을 nginx로 띄웠었습니다. 센차터치가 기본적으로 SPA이다보니 화면을 위로 올릴 때는 문제가 없지만 화면을 아래로 당기면 새로고침이 되고 말았습니다. 이를 해결하는 간단한 방법을 찾아 적용하는 과정을 정리하였습니다.

 

ㅁ CSS로 아래로 당겨 새로고침을 막는 방법

overscroll-behavior-y: contain;

CSS로 html의 태그에 style로 직접 적용하면 해결이 되었습니다.

 

ㅁ 적용 모습

 구체적으로 body에 style을 적용하였습니다. 

 이후에 웹앱의 화면을 아래로 당겨도 새로고침은 발생하지 않았습니다.

 

 

ㅁ 함께 보면 좋은 사이트

CSS - 스크롤 체이닝의 개념, 스크롤 체인(모바일 새로고침) 방지법 (overscroll-behavior)