스크롤 막대가 Bottom_javascript 기술에 도달하는지 확인하는 JS 코드

스크롤 막대가 맨 아래까지 도달했는지 확인하려면 DOM의 세 가지 속성 값인 scrollTop, clientHeight 및 scrollHeight를 사용해야 합니다.

scrollTop은 Y축 스크롤 막대의 스크롤 거리입니다.

clientHeight는 콘텐츠 표시 영역의 높이입니다.

ScrollHeight는 콘텐츠의 표시 영역 높이에 오버플로(스크롤) 거리를 더한 값입니다.

이 세 가지 속성의 소개에서 볼 수 있듯이 스크롤 막대가 맨 아래에 도달하는 조건은 scrollTop clientHeight == scrollHeight입니다.

더 이상 고민할 필요 없이 빠르게 코드를 업로드해 보겠습니다(다른 브라우저와 호환 가능).

코드 복사 코드는 다음과 같습니다.

//스크롤바 Y축 스크롤 거리

함수 getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}

//문서 전체 높이

함수 getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}

//브라우저 뷰포트의 높이

function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}

window.onscroll = function(){
if(getScrollTop() getWindowHeight() == getScrollHeight()){
Alert("당신은 맨 아래에 있습니다!");
}
};

jquery를 이용해서 구현하시면 더 쉬우실 텐데요,

코드 복사 코드는 다음과 같습니다:

$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document). height( );
var windowHeight = $(this).height();
if(scrollTop windowHeight == scrollHeight){
Alert("당신은 맨 아래에 있습니다");
}
});

유사한 아이디어로 특정 요소의 스크롤 막대가 맨 아래에 도달했는지 확인하려면 document.body를 특정 요소로 바꾸면 됩니다. scrollTop 및 scrollHeight 동일하지만 요소의 표시 높이를 얻으려면 offsetHeight 속성을 사용해야 하며 메소드를 따르기만 하면 됩니다.