Exemple de code détaillé montrant comment utiliser javascript pour déterminer si la barre de défilement atteint le bas

Pour déterminer si la barre de défilement atteint le bas, vous devez utiliser trois valeurs d'attribut​​du DOM, à savoir scrollTop, clientHeight et scrollHeight.

scrollTop est la distance de défilement de la barre de défilement sur l'axe Y.

clientHeight est la hauteur de la zone visible du contenu.

scrollHeight est la hauteur de la zone visible du contenu plus la distance de débordement (défilement).

Comme le montre l'introduction de ces trois attributs, la condition pour que la barre de défilement atteigne le bas est 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!");
　　}
};

Ce serait plus simple si vous utilisiez jquery pour l'implémenter

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

Si vous souhaitez déterminer si la barre de défilement d'un certain élément atteint le bas, en fonction d'un. idée similaire, remplacez simplement document.body par un élément spécifique. La méthode pour obtenir scrollTop et scrollHeight est la même. Cependant, pour obtenir la hauteur visible de l'élément, vous devez utiliser l'attribut offsetHeight.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!