스크롤 막대가 아래쪽에 도달했는지 확인하기 위해 자바스크립트를 사용하는 방법에 대한 자세한 코드 예

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

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

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

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

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

//滚动条在Y轴上的滚动距离
function 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;
}
//文档的总高度
function 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("you are in the bottom!");
　　}
};

jquery를 사용하여 구현하면 더 간단해집니다.

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("you are in the bottom");
　　}
});

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

위 내용은 스크롤 막대가 아래쪽에 도달했는지 확인하기 위해 자바스크립트를 사용하는 방법에 대한 자세한 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!