스크롤 막대가 아래쪽에 도달했는지 확인하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!