Vue 위로 스크롤(새로고침) 막기

Scroll chaining

 

overscroll-behavior 속성이 auto로 설정된 (기본값) 영역은 스크롤 영역이 모두 끝나면 부모 스크롤 영역이 움직이기 시작합니다. 이것을 스크롤 체이닝(스크롤이 연결되어 있기 때문에 체이닝이라는 단어를 사용)이라고 합니다.

 

vue로 홈페이지를 만들었는데 모바일 기기에서 위로 스크롤하니 화면이 새로고침이 돼어버렸고 저는 그것을 막고자 했습니다.

기본값이 auto이기 때문에 contain으로 바꿔주면 부모 스크롤 영역을 움직이지 않습니다.

 

overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto

overscroll-behavior:contain overscroll-behavior:contain overscroll-behavior:contain overscroll-behavior:contain overscroll-behavior:contain overscroll-behavior:contain overscroll-behavior:contain overscroll-behavior:contain

 

아래 링크에서 지원되는 속성과 브라우저 버전을 확인하여 사용하기를 바래봅니다 ^ㅡ^

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior