Maison > interface Web > js tutoriel > Exemple de code détaillé montrant comment utiliser javascript pour déterminer si la barre de défilement atteint le bas

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

伊谢尔伦
Libérer: 2017-07-19 15:58:47
original
1221 Les gens l'ont consulté

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!");
  }
};
Copier après la connexion

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");
  }
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal