JavaScript로 사용자가 페이지 맨 아래로 스크롤했을 때 감지하는 방법

원시 JavaScript를 사용하여 사용자가 페이지 하단으로 스크롤할 때 감지하는 방법을 알아보세요.

사용자가 페이지 하단이나 특정 섹션으로 스크롤했을 때 이벤트를 트리거하고 싶을 때가 있습니다.

하단 감지로 스크롤(모든 최신 브라우저, IE9에서 작동) 이상)

window.onscroll = function() {
 if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
  alert("At the bottom!")
 }
}

엣지 케이스 솔루션:

첫 번째 방법이 작동하지 않으면 Math.ceil()을 사용해 보세요. window.pageYOffset의 메소드 :

window.onscroll = function() {
  if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
  alert('At the bottom!')
  }
}

Math.ceil을 사용하는 이유 일부 브라우저는 요소에 하위 픽셀 정밀도를 사용합니다. 예를 들어 너비 또는 높이는 500.25px일 수 있습니다.

Math.ceil 위쪽으로 반올림됩니다. 1.45픽셀은 2픽셀이 됩니다.

창 높이를 1px 오프셋하는 일부 Mac 컴퓨터에도 문제가 있습니다. 이 문제를 해결하려면 문서 높이에서 몇 픽셀을 뺄 수 있습니다.

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

참고:scrollY pageYOffset 대신 자주 사용됩니다. . 하지만 scrollY Internet Explorer에서 작동하지 않습니다. 최신 브라우저 간 호환성을 위해 pageYOffset을 사용하세요. .

다음은 작동 예를 보여주는 CodePen입니다.

window.innerHeight 간의 관계에 대해 혼란스럽다면 , window.pageYOffset 및 document.body.offsetHeight 다음은 스크롤할 때 각각의 픽셀 값을 기록하는 작은 도우미 함수입니다.

window.onscroll = function() {
  console.log('Window height (px):', window.innerHeight)
  console.log('Currently scrolled from top (px):', window.pageYOffset)
  console.log('Document height(px):', document.body.offsetHeight)   
}

그러면 스크롤 감지 기능이 작동하는 방식을 더 쉽게 이해할 수 있습니다. 처음에는 pageYOffset 나를 혼란스럽게했다. 현재의 수를 나타냅니다. 픽셀은 위에서 수직으로 스크롤됩니다.