Comment déterminer si la barre de défilement atteint le bas dans jquery

Comment jquery détermine si la barre de défilement atteint le bas : 1. Utilisez la méthode [scrollTop()] et jQuery détecte que la barre de défilement de la fenêtre du navigateur atteint le bas ; 2. Utilisez [scroll_div] pour détecter le cas où la barre de défilement atteint le bas.

L'environnement d'exploitation de ce tutoriel : système Windows7, version jquery3.2.1, ordinateur thinkpad t480.

Comment jquery détermine si la barre de défilement a atteint le bas :

1. jQuery détecte que la barre de défilement de la fenêtre du navigateur a atteint le bas .

jQuery obtient les fonctions liées à la position et à la taille :

• $(document).height() Obtient la hauteur de la page entière

• $(window).height() Obtient le navigateur actuel. La hauteur de la partie visible de la page. Cette taille changera lorsque vous redimensionnerez la fenêtre du navigateur, qui est différente du document

• scrollTop() Obtenez le décalage de l'élément correspondant par rapport au haut de la barre de défilement.

• scrollLeft() Obtenez le décalage de l'élément correspondant par rapport au côté gauche de la barre de défilement.

• scroll([[data],fn]) L'événement scroll est déclenché lorsque la barre de défilement change

jQuery détecte que la barre de défilement atteint le code du bas :

$(document).ready(function() {
  $(window).scroll(function() {
  
    if ($(document).scrollTop()<=0){
      alert("滚动条已经到达顶部为0");
    }
  
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
      alert("滚动条已经到达底部为" + $(document).scrollTop());
    }
  });
});

2. jQuery détecte que la barre de défilement dans le div atteint le bas

La première moitié de l'article a présenté la détection par jQuery de la barre de défilement de la fenêtre du navigateur atteignant le bas. En fait, je ne comprends toujours pas les concepts de scrollTop et scrollHeight. Habituellement, les barres de défilement sont placées dans des divs.

L'identifiant de détection suivant est scroll_divLa barre de défilement atteint l'événement inférieur :

<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red">
      <div style="height:10000px">
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
      </div>
    </div>

Vous devez d'abord comprendre quelques concepts :

• scrollHeight : signifie la hauteur à laquelle la barre de défilement doit défiler, c'est-à-dire le div interne, 10000px

• scrollTop : indique la hauteur de la barre de défilement, qui peut être supérieur au div externe 500px

C'est-à-dire la hauteur de scrollDiv + la hauteur maximale de scrollTop = scrollHeight

Il est donc simple de détecter la hauteur de la barre de défilement div dans le div :

$(document).ready(function() {
  $("#scroll_div").scroll(function(){
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      alert("到达底部了");
    }
  });
});

Si les données sont chargées de manière asynchrone, les données ne sont pas chargées. Enfin, la demande de chargement des données de la même page est à nouveau violée.

$(document).ready(function() {
  var flag = false;
  $("#scroll_div").scroll(function(){
     
    if(flag){
      //数据加载中
      return false;
    }
     
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      //请求数据
      flag = true;
      alert("到达底部了");
    }
  });
});

Recommandations d'apprentissage gratuites associées :

javascript(vidéo)

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!