jQuery détecte si la barre de défilement atteint bottom_jquery

1. jQuery détecte que la barre de défilement de la fenêtre du navigateur atteint le bas
jQuery obtient les fonctions liées à la position et à la taille  :
$(document).height() Obtenez la hauteur de la page entière
$(window).height() Obtenez la hauteur actuelle de la partie de la page que le navigateur peut voir. Cette taille changera lorsque vous redimensionnerez la fenêtre du navigateur, qui est différente du document
scrollTop() Obtient le décalage de l'élément correspondant par rapport au haut de la barre de défilement.
scrollLeft() Obtient 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 lorsque 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, la barre de défilement est placée dans un div.

Détectez la barre de défilement atteignant l'événement inférieur avec l'identifiant scroll_div comme suit :

<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red">
      <div style="height:10000px">
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
      </div>
    </div>

Vous devez d'abord comprendre quelques concepts :
scrollHeight : indique 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érieure au div externe 500px
C'est-à-dire la hauteur de scrollDiv et la hauteur maximale de scrollTop = scrollHeight
Donc détecter la hauteur de la barre de défilement du div dans le div est simple :

$(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 complètement chargées et la demande de chargement des données de la même page est violée, j'ajoute généralement un indicateur

$(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("到达底部了");
    }
  });
});