css로 모바일 아래 스크롤 시 새로고침 막기
2020. 3. 11. 07:47
풀 페이지 반응형 포트폴리오를 만들면서
모바일에서 자꾸 위로 올릴때마다
새로고침 되는 것이 불편했다.
여러가지 새로고침을 막는 방법 중
가장 간단한 방법을 찾게 되었다.
그 방법을 포스팅으로 남겨봅니다.
아래로 당겨서 새로고침 막는 방법
css에서 <html>태그에
overscroll-behavior: contain;
을 넣으면 된다.
끝이다.
정말 간단하지 않은가?!
이 속성은 원래
페이지에 여러 스크롤바가 있을 경우
한 스크롤에서 다음 스크롤로
넘어가는 현상(스크롤 체이닝)을
막는 속성이다.
내 경우엔
모바일에서 최상단에서
새로고침 되는 것을 막기위해서
이 css 속성을 사용하였다.
모든 곳에서 이 속성을 사용할 수는 없으니
아래 사진을 참조하기 바란다.
브라우저 지원여부에 따라
모바일에서 당겨서 새로고침 되는 것을 막을 수 있다.
찾아본 사람에게 도움이 되었길 바라며 ;)
'Web Publisher > HTML - CSS' 카테고리의 다른 글
| css로 제목 한줄에 쓰기 / 끝에 ... (말줄임표) 넣는 방법 (0) | 2020.02.17 |
|---|
