모바일에서 스크롤을 일부분만 막고 싶습니다.
조회수 642회
<body><!-- 스크롤 있음 -->
<div style="position: fixed"></div><!-- 스크롤이 있을때도 있고 없을때도 있음 -->
</body>
예시로 이렇게 있을때
div
가 스크롤이 없거나 스크롤이 각 끝부분에 도착했을 때 계속 화면을 위 혹은 아래로 움직이면 body
부분의 스크롤이 움직이는대 이때 body
부분의 스크롤을 안움직이게 하고 싶습니다.
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
요점은 이겁니다.
스크롤 이벤트 리스너를 등록하여 브라우저 기본 스크롤 동작을 막고 이벤트에서 받아온 값으로 매뉴얼하게 스크롤 위치를 이동시킵니다.
(흐음... 이것저것 해 봤지만 다 외통수 맞고 이 방법밖에 안 남았어요...)
https://codepen.io/digda/pen/xeVRKR
jquery를 기준으로 작성하였으며 데스크탑/모바일 별도의 대응코드가 있습니다.
모바일에서 기본적으로 제공하는 스크롤 관성은 사라집니다. 관성을 적용하려면 직접 구현하거나 커스텀 스크롤 관성을 구현해 놓은 라이브러리를 이용해야 겠네요.
구성하고 계신 페이지 특성에 맞게 수정해서 사용하세요.
댓글 입력