모바일에서 스크롤을 일부분만 막고 싶습니다.

조회수 642회
<body><!-- 스크롤 있음 -->
    <div style="position: fixed"></div><!-- 스크롤이 있을때도 있고 없을때도 있음 -->
</body>

예시로 이렇게 있을때
div가 스크롤이 없거나 스크롤이 각 끝부분에 도착했을 때 계속 화면을 위 혹은 아래로 움직이면 body부분의 스크롤이 움직이는대 이때 body부분의 스크롤을 안움직이게 하고 싶습니다.

  • 음.. 뭔가 구체적인 예시를 생각하고 계시지 않나요? 이를테면 어떤 사이트처럼 하고 싶으신 건가요? 엽토군 2019.4.3 20:15
  • 어떤 사이트처럼 하고싶다기보단 커다란 네모박스안에 작은 네모박스가 있을떄 커다란 박스에도 스크롤이 있고 작은 박스에도 스크롤이 있다면 작은 네모박스의 스크롤을 제일 밑까지 내린다음에도 스크롤을 계속 돌리면 작은 박스를 감싸고 있는 커다란 박스의 스크롤이 움직이더라고요 이떄 커다란 네모박스의 스크롤이 움직이는걸 막고싶어서 그렇습니다. 알 수 없는 사용자 2019.4.4 10:13

1 답변

  • 요점은 이겁니다.

    스크롤 이벤트 리스너를 등록하여 브라우저 기본 스크롤 동작을 막고 이벤트에서 받아온 값으로 매뉴얼하게 스크롤 위치를 이동시킵니다.

    (흐음... 이것저것 해 봤지만 다 외통수 맞고 이 방법밖에 안 남았어요...)

    https://codepen.io/digda/pen/xeVRKR

    jquery를 기준으로 작성하였으며 데스크탑/모바일 별도의 대응코드가 있습니다.

    모바일에서 기본적으로 제공하는 스크롤 관성은 사라집니다. 관성을 적용하려면 직접 구현하거나 커스텀 스크롤 관성을 구현해 놓은 라이브러리를 이용해야 겠네요.

    구성하고 계신 페이지 특성에 맞게 수정해서 사용하세요.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)