Eine kurze Analyse, wie Jquery feststellt, dass die Bildlaufleiste zum Ende der Seite gescrollt wurde, und die event_jquery ausführt

In diesem Artikel wird Programmierern vorgestellt, wie JQuery ermittelt, wann die Bildlaufleiste den unteren Rand der Seite erreicht hat, und das Ereignis ausführt. Verstehen Sie zunächst die drei Dom-Elemente, nämlich clientHeight, offsetHeight und scrollTop.

Verstehen Sie zunächst die drei Dom-Elemente, nämlich clientHeight, offsetHeight und scrollTop.

clientHeight: Die Höhe dieses Elements nimmt die Höhe des gesamten Raums ein. Wenn ein Div eine Bildlaufleiste hat, umfasst die Höhe daher nicht die Bildlaufleiste Der Inhalt wird unten nicht angezeigt. Es ist nur die Höhe des DIV.

offsetHeight: bezieht sich auf die Höhe des Elementinhalts. Gemäß dem oben Gesagten ist diese Höhe die Höhe innerhalb des DIV, einschließlich des sichtbaren Teils und des unsichtbaren Teils unter der Bildlaufleiste.

scrollTop: Was ist das? Es kann als die Länge verstanden werden, über die die Bildlaufleiste scrollen kann.

Wenn beispielsweise die Höhe eines DIV 400 Pixel beträgt (d. h. clientHeight ist 400) und der Inhalt darin eine lange Liste ist, beträgt die Höhe des Inhalts 1000 Pixel (d. h. offsetHeight ist 1000). Wir sehen also 400 Pixel im sichtbaren Teil und im 1000 Pixel großen Inhalt sind immer noch 600 Pixel unsichtbar. Den unsichtbaren Teil können wir durch Ziehen der Bildlaufleiste anzeigen. Wenn die Bildlaufleiste nicht gezogen ist, ist scrollTop zu diesem Zeitpunkt 0. Wenn Sie die Bildlaufleiste nach unten ziehen und der untere Teil der Liste angezeigt wird, ist scrollTop 600. Der Wertebereich von scrollTop beträgt also [0, 600]. Diese 600 können also als die Länge verstanden werden, die die Bildlaufleiste scrollen kann.

Nachdem Sie das obige Konzept verstanden haben. Es ist leicht zu bestimmen, ob nach unten gescrollt werden soll.

Zuerst ziehen wir die Bildlaufleiste 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. Innerhalb von 50 Pixeln vom unteren Rand der Bildlaufleiste: (offsetHeight – clientHeight) – scrollTop <= 50
3. Innerhalb von 5 % vom unteren Rand der Bildlaufleiste: scrollTop / (offsetHeight – clientHeight) >= 0,95

Das Gleiche wie oben.
Wenn Sie nach unten ziehen möchten, um Inhalte automatisch zu laden. Registrieren Sie einfach ein Scrollbar-Ereignis:

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时,加载新内容
    // 这里加载数据..
    }
   });
}

Der obige Artikel analysiert kurz, wie jquery feststellt, wann die Bildlaufleiste zum Ende der Seite gescrollt hat, und das Ereignis ausführt. Dies ist der gesamte vom Herausgeber geteilte Inhalt, und ich hoffe, er kann Ihnen einen Hinweis geben Sie werden Script Home mehr unterstützen.