Detailliertes Codebeispiel für die Verwendung von Javascript, um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht

Um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht, müssen Sie drei Attributwerte des DOM verwenden, nämlich scrollTop, clientHeight und scrollHeight.

scrollTop ist der Scrollabstand der Bildlaufleiste auf der Y-Achse.

clientHeight ist die Höhe des sichtbaren Inhaltsbereichs.

scrollHeight ist die Höhe des sichtbaren Bereichs des Inhalts plus der Überlaufdistanz (Scrolldistanz).

Wie aus der Einführung dieser drei Attribute hervorgeht, lautet die Bedingung, dass die Bildlaufleiste den unteren Rand erreicht, 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!");
　　}
};

Es wäre einfacher, wenn Sie jquery verwenden würden, um es zu implementieren.

$(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");
　　}
});

Wenn Sie anhand von a feststellen möchten, ob die Bildlaufleiste in einem bestimmten Element den unteren Rand erreicht Ähnliche Idee: Ersetzen Sie einfach document.body durch ein bestimmtes Element. Um die sichtbare Höhe des Elements zu erhalten, können Sie einfach dem Kürbis folgen.

Das obige ist der detaillierte Inhalt vonDetailliertes Codebeispiel für die Verwendung von Javascript, um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!