jQuery erkennt, ob die Bildlaufleiste „bottom_jquery' erreicht

1. jQuery erkennt, dass die Bildlaufleiste des Browserfensters den unteren Rand erreicht
jQuery ruft Position und Größe ab bezogene Funktionen:
$(document).height() Ermittelt die Höhe der gesamten Seite
$(window).height() Ruft die aktuelle Höhe des Teils der Seite ab, den der Browser sehen kann. Diese Größe ändert sich, wenn Sie die Größe des Browserfensters ändern, das sich vom Dokument unterscheidet
scrollTop() Ruft den Versatz des passenden Elements relativ zum oberen Rand der Bildlaufleiste ab.
scrollLeft() Ruft den Versatz des passenden Elements relativ zur linken Seite der Bildlaufleiste ab.
scroll([[data],fn]) Das Scroll-Ereignis wird ausgelöst, wenn sich die Scroll-Leiste ändert
jQuery erkennt, wenn die Bildlaufleiste den unteren Code erreicht:

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

2. jQuery erkennt, dass die Bildlaufleiste im Div den unteren Rand erreicht
In der ersten Hälfte des Artikels wurde die Erkennung der Bildlaufleiste des Browserfensters vorgestellt, die den unteren Rand erreicht. Tatsächlich verstehe ich die Konzepte von scrollTop und scrollHeight normalerweise nicht.

Erkennen Sie das Ereignis, dass die Bildlaufleiste den unteren Rand erreicht, mit der ID scroll_div wie folgt:

<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>

Zuerst müssen Sie einige Konzepte verstehen:
scrollHeight: Gibt die Höhe an, über die die Bildlaufleiste gescrollt werden muss, d. h. das interne Div, 10000px
scrollTop: Gibt die Höhe der Bildlaufleiste an, die größer als die äußere div 500px sein kann
Das heißt, die Höhe von scrollDiv und die maximale Höhe von scrollTop = scrollHeight
Das Erkennen der Höhe der Div-Bildlaufleiste im Div ist also einfach:

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

Wenn die Daten asynchron geladen werden, die Daten nicht vollständig geladen werden und die Datenladeanforderung derselben Seite verletzt wird, füge ich normalerweise ein Flag hinzu

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