스크롤 특정 영역 감지

window.addEventListener("scroll", function() {}) 이 아닌 특정 요소에서 스크롤을 발생할 때 위치를 확인해보는 것을 알아보자.

 

약관같은 것을 보다가 맨 아래까지 다 읽었을 경우에만 다음페이지로 넘어갈 수 있는 기능을 본적이 있을 것이다. 특정 요소에서 스크롤 시 위치를 어떻게 확인하는지 알아보고, 원하는 위치에 도달 할 시 이벤트 주는 것도 해보도록 하자.

 

코드

HTML

<div class="scroll-Box">
	<div class="content">스크롤을 맨 아래까지 이동해주세요!</div>
</div>

CSS

  .scroll-Box {
    width: 300px;
    height: 200px;
    overflow: scroll;
    border: 1px solid black;
    padding: 10px;
  }
  
  .content {
    height: 600px;
  }

Javascript

  const scrollBox = document.querySelector(".scroll-Box");

  scrollBox.addEventListener("scroll", () => {
    const scrollTop = document.querySelector(".scroll-Box").scrollTop;
    const scrollHeight = document.querySelector(".scroll-Box").scrollHeight;
    const clientHeight = document.querySelector(".scroll-Box").clientHeight;

    if (scrollTop + clientHeight >= scrollHeight) {
      alert("맨 아래에 도달했습니다.");
    }
  });

 

설명

구현 방법

구현 방식은 간단하다. 감지하고 싶은 영역의 요소에 스크롤 이벤트를 주고 그 영역의 특정 위치에 도달했을 때 필요한 값을 통해 원하는 곳에 도달했는지 확인하면된다.

 

필요한 값들은 아래와 같다.

• scrollTop: 스크롤 박스의 최상단에서부터의 스크롤된 픽셀 수를 가져온다
• scrollHeight: 스크롤 박스의 전체 높이를 가져온다
• clientHeight: 스크롤 박스의 클라이언트 영역 높이를 가져온다

 

완성

 

생각해 볼 것

scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행이 돼서 컴퓨터에 부담이 되므로 너무 많이 사용하는 것은 성능상 안좋다. 

내가 구현한 것도 글을 끝까지 읽었는지 한번만 체크해도 되는 기능이라 한번만 체크하도록 변경하는 작업도 필요해보인다!