suchen

Heim >Web-Frontend >js-Tutorial >jQuery ermittelt, ob die Bildlaufleiste bis zum Ende des Seitenskripts gescrollt wurde

jQuery ermittelt, ob die Bildlaufleiste bis zum Ende des Seitenskripts gescrollt wurde

巴扎黑
巴扎黑Original
2017-06-29 09:41:331451Durchsuche

Tatsächlich ist es sehr einfach, die drei Parameter clientHeight, offsetHeight und scrollTop zu verwenden. Lassen Sie mich Ihnen ein Beispiel vorstellen.

Beispiel, nach unten beurteilen

Der Code lautet wie folgt 

$(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
        alert("哦哦,到底了.");
    }
});

Wenn Sie nach unten ziehen möchtenLaden Sie automatisch den Inhalt . Registrieren Sie einfach ein Scrollbar-Ereignis:

Zuerst ziehen wir die Scrollleiste von oben nach unten. Was sich ändert, ist der Wert von scrollTop, und dieser Wert hat einen Bereich.
Dieses Intervall ist: [0, (offsetHeight - clientHeight)]
Das heißt, die Änderung im gesamten Prozess des Ziehens der Bildlaufleiste liegt im Bereich von 0 bis (offsetHeight - clientHeight).

1. Stellen Sie fest, ob die Bildlaufleiste nach unten gescrollt wurde: scrollTop == (offsetHeight – clientHeight)
2. Wenn sich die Bildlaufleiste innerhalb von 50 Pixeln von unten befindet: (offsetHeight – clientHeight) – scrollTop 7d400ec38c2d21a424bf04d4cb8d0d34= 0,95

Der Code lautet wie folgt

scrollBottomTest =function(){
     $("#contain").scroll(function(){
         var $this =$(this),
         viewH =$(this).height(),//可见高度
         contentH =$(this).get(0).scrollHeight,//内容高度
         scrollTop =$(this).scrollTop();//滚动高度
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
        // 这里加载数据..
        }
     });
}

js-Beurteilung

Bestimmen Sie, ob die vertikale Bildlaufleiste den unteren Rand erreicht hat
Nach der Klärung der oben genannten Konzepte ist die Codierung eigentlich relativ einfach. Das Folgende ist der Beispielcode:

Der Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <title>下拉滚动条滚到底部了吗？</title>
      <script language="javascript" src="jquery-1.4.2.min.js"></script>
      <script language="javascript">
      $(document).ready(function (){
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0;   //滚动到的当前位置
        var nDivHight = $("#div1").height();
        $("#div1").scroll(function(){
          nScrollHight = $(this)[0].scrollHeight;
          nScrollTop = $(this)[0].scrollTop;
          if(nScrollTop + nDivHight >= nScrollHight)
            alert("滚动条到底部了");
          });
      });
      </script>
    <body>
    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
      <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
    </div>
    </body>
    </html>

Code-Erklärung:

Die Höhe des inneren Divs beträgt 750 und die Höhe des äußeren Divs beträgt 500, sodass die vertikale Bildlaufleiste einen Bildlauf über eine Distanz von durchführen muss 750-500=250, um den unteren Rand zu erreichen. Siehe die Anweisung nScrollTop + nDivHight >= nScrollHight.
Im Programm verbraucht das Erkennen und Ausführen der if-Beurteilungsanweisung im Scroll-Ereignis des externen Div viele CPU-Ressourcen. Ziehen Sie die Bildlaufleiste mit der Maus, und dieses Ereignis wird ausgelöst, solange eine Änderung um ein Pixel erfolgt. Wenn Sie jedoch auf die Pfeile an beiden Enden der Bildlaufleiste klicken, wird das Ereignis viel seltener ausgelöst. Daher sollte das Scroll-Ereignis der Bildlaufleiste mit Vorsicht verwendet werden.
In diesem Beispiel wird die Situation beurteilt, in der keine horizontale Bildlaufleiste vorhanden ist. Wenn eine horizontale Bildlaufleiste vorhanden ist, ändert sich die Situation geringfügig. Daher müssen Sie in der Anweisung „nScrollTop + nDivHight >= nScrollHight“ „>=“ verwenden " Vergleichsoperator , und wenn keine horizontale Bildlaufleiste vorhanden ist, reicht das Gleichheitszeichen „=" aus. Man kann es tatsächlich testen. Sie können auch feststellen, ob die horizontale Bildlaufleiste bis zum Ende gescrollt wurde.

Das obige ist der detaillierte Inhalt vonjQuery ermittelt, ob die Bildlaufleiste bis zum Ende des Seitenskripts gescrollt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der perfekte Weg, um mit jQuery einen Seiten-Scroll-Effekt (Scroll) zu erzielenNächster Artikel：Der perfekte Weg, um mit jQuery einen Seiten-Scroll-Effekt (Scroll) zu erzielen

In Verbindung stehende Artikel

Mehr sehen