So ermitteln Sie, ob die Bildlaufleiste in JQuery den unteren Rand erreicht

So bestimmt jQuery, ob die Bildlaufleiste den unteren Rand erreicht: 1. Verwenden Sie die Methode [scrollTop()], und jQuery erkennt, dass die Bildlaufleiste des Browserfensters den unteren Rand erreicht. 2. Verwenden Sie [scroll_div], um das Ereignis zu erkennen, bei dem der Bildlauf erfolgt Der Balken erreicht den unteren Rand.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery3.2.1-Version, Thinkpad T480-Computer.

Wie jQuery ermittelt, ob die Bildlaufleiste den unteren Rand erreicht hat:

1. jQuery erkennt, ob die Bildlaufleiste des Browserfensters den unteren Rand erreicht hat

jQuery ruft die Positions- und Größenbezogenen Funktionen ab:

• $(document) .height() Ermittelt die Höhe der gesamten Seite$(document).height()    获取整个页面的高度

• $(window).height()    获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的

• scrollTop()    获取匹配元素相对滚动条顶部的偏移。

• scrollLeft()    获取匹配元素相对滚动条左侧的偏移。

• scroll([[data],fn])    当滚动条发生变化时触犯scroll事件

jQuery检测滚动条到达底部代码：

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

二、jQuery检测div中滚动条到达底部

上半篇介绍了jQuery检测浏览器window滚动条到达底部，其实还并不理解scrollTop和scrollHeight概念，通常滚动条都是放在div中的。

如下检测id为scroll_div滚动条到达底部事件:

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

首先需要理解几个概念:

• scrollHeight:表示滚动条需要滚动的高度，即内部div，10000px

• scrollTop

$(window).height() Ermittelt die Höhe des aktuellen Teils der Seite dass der Browser sehen kann. Diese Größe ändert sich, wenn Sie die Größe des Browserfensters ändern, was sich von der Größe des Dokuments unterscheidet.

scrollTop() Ruft den Versatz des passenden Elements relativ zum oberen Rand der Bildlaufleiste ab.

scrollLeft() Ermittelt den Versatz des passenden Elements relativ zur linken Seite der Bildlaufleiste.

scroll([[data],fn]) Das Scroll-Ereignis wird ausgelöst, wenn sich die Scroll-Leiste ändert🎜🎜🎜🎜jQuery erkennt, dass die Scroll-Leiste den unteren Code erreicht: 🎜

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

🎜🎜 2. jQuery-Erkennung Die Bildlaufleiste im Div erreicht den unteren Rand🎜🎜🎜In der ersten Hälfte des Artikels wurde jQuery eingeführt, um zu erkennen, dass die Bildlaufleiste des Browserfensters den unteren Rand erreicht. Tatsächlich verstehen wir die Konzepte von scrollTop und scrollHeight immer noch nicht Normalerweise wird die Bildlaufleiste im Div platziert. 🎜🎜Das Folgende erkennt das Ereignis, dass die Bildlaufleiste den unteren Rand erreicht, mit der ID scroll_div: 🎜

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

🎜Zunächst müssen Sie ein paar Konzepte verstehen: 🎜🎜🎜🎜scrollHeight Code>: Gibt die Höhe an, auf der die Bildlaufleiste gescrollt werden muss, d Das äußere Div beträgt 500 Pixel. Das heißt, die Höhe von scrollDiv + die maximale Höhe von scrollTop = scrollHeight asynchron geladen wird, die Daten nicht vollständig geladen werden und die Datenladeanforderung derselben Seite verletzt wird, füge ich normalerweise ein Flag hinzu🎜rrreee🎜🎜Verwandtes kostenloses Lernen Empfohlen: 🎜Javascript🎜(Video)🎜🎜

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie, ob die Bildlaufleiste in JQuery den unteren Rand erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!