[JS] 자바스크립트로 스크롤이 제일 밑으로 내려갔을 때 감지하는 방법

반응형 웹사이트나 웹 애플리케이션을 개발하다 보면 사용자가 스크롤을 내려서 새로운 컨텐츠를 확인해야 하는 경우가 있습니다. 이때, 사용자가 스크롤을 제일 밑으로 내렸을 때 추가적인 액션을 수행하고 싶은 경우가 있을 수 있습니다. 이번 블로그 글에서는 자바스크립트를 사용하여 스크롤이 제일 밑으로 내려갔을 때 이를 감지하는 방법에 대해 알아보겠습니다.

 

1.  스크롤 이벤트 리스너 추가하기

스크롤 이벤트를 감지하기 위해 window 객체에 이벤트 리스너를 추가해야 합니다. 이벤트 리스너를 등록하면 스크롤이 발생할 때마다 특정 함수가 호출됩니다.

window.addEventListener('scroll', function() {
  // 스크롤 이벤트 발생 시 실행할 코드 작성
});

 

2. 스크롤 위치 확인하기

스크롤 이벤트가 발생할 때마다 스크롤의 현재 위치를 확인해야 합니다. 스크롤 위치를 알아내는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 다음과 같습니다.

var isScrollAtBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight;

위 코드를 사용하면 현재 스크롤 위치가 화면의 맨 아래에 도달했는지 여부를 확인할 수 있습니다. isScrollAtBottom 변수는 불리언(Boolean) 값으로, 스크롤이 맨 아래에 도달하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

반응형

 

3. 스크롤 위치에 따른 추가적인 액션 수행하기

isScrollAtBottom 변수를 이용하여 스크롤이 제일 밑으로 내려왔을 때 추가적인 액션을 수행할 수 있습니다. 예를 들어, 스크롤이 제일 밑으로 내려왔을 때 새로운 데이터를 불러오거나 버튼을 보이게 하는 등의 기능을 구현할 수 있습니다.

window.addEventListener('scroll', function() {
  var isScrollAtBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight;

  if (isScrollAtBottom) {
    // 스크롤이 제일 밑으로 내려왔을 때 수행할 코드 작성
    // 예시: 새로운 데이터를 불러오는 AJAX 요청이나 추가적인 컨텐츠 보여주기 등
  }
});

위의 코드는 스크롤이 제일 밑으로 내려왔을 때 특정 액션을 수행하도록 구현된 예시입니다. 필요에 따라 코드를 수정하여 원하는 기능을 추가할 수 있습니다.

이렇게 자바스크립트를 활용하여 스크롤이 제일 밑으로 내려왔을 때 감지하고, 추가적인 액션을 수행하는 방법에 대해 알아보았습니다. 이를 활용하여 웹사이트나 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

 

---

다른 방법

저는 또한 아래와 같이 사용하였습니다. 참고만 해주세요.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});