Sie müssen drei DOM -Elemente verstehen, nämlich: ClientHeight, Offseteight, Scrolltop.
ClientHeight: Die Höhe dieses Elements nimmt die Höhe des gesamten Raums ein. Wenn ein DIV eine Bildlaufleiste hat, enthält diese Höhe nicht den Inhalt des folgenden Teils, in dem die Bildlaufleiste nicht angezeigt wird. Und es ist nur die Höhe von Div.
Offseteight: Bezieht sich auf die Höhe des Elementinhalts. Nach der oben genannten Höhe ist diese Höhe die Höhe innerhalb des DIV, einschließlich des sichtbaren Teils und des unsichtbaren Teils unterhalb der Bildlaufleiste.
Scrolltop: Was ist das? Es kann als die Länge der Scrollstange verstanden werden, die gescrollt werden kann.
Wenn beispielsweise eine DIV -Höhe 400px beträgt (d. H. ClientHeight 400), ist der Inhalt im Inhalt eine sehr lange Liste und die Inhaltshöhe 1000px (d. H. Offseteight 1000). Im sichtbaren Teil sehen wir also, dass der 400px- und 1000px -Inhalt immer noch 600px unsichtbar ist. Und dieser unsichtbare Teil ist das, was wir anzeigen können, indem wir die Bildlaufleiste ziehen. Wenn die Bildlaufleiste nicht zieht, ist der Scrolltop zu diesem Zeitpunkt 0. Wenn Sie die Bildlaufleiste nach unten ziehen, wird der untere Teil der Liste angezeigt. Zu diesem Zeitpunkt beträgt der Scrolltop 600. Daher beträgt das Wertintervall von Scrolltop [0, 600]. Dieser 600 kann also als Länge der Scrollstange verstanden werden, die gescrollt werden kann.
Nach dem Verständnis des obigen Konzepts. Es ist leicht zu erkennen, ob es nach unten scrollt.
Zunächst ziehen wir die Scrollbar, ziehen von oben nach unten, und die Änderung ist der Wert von Scrolltop, und dieser Wert hat ein Intervall.
Dieses Intervall ist: [0, (Offseteight - ClientHeight)]
Das heißt, der gesamte Prozess des Scroll -Stabs zieht Änderungen im Bereich von 0 bis (Offseteight ClientHeight).
1. Urteil Die Scrollbar Scrolls nach unten: Scrolltop == (Offseteight ClientHeight)
2. Innerhalb von 50px vom unteren Ende der Bildlaufleiste: (Offseteight ClientHeight) Scrolltop <= 50
3. Innerhalb von 5% der Entfernung der Bildlaufleiste vom Boden: Scrolltop / (Offseteight ClientHeight)> = 0,95
Wie oben.
Wenn Sie nach unten ziehen möchten, laden Sie den Inhalt automatisch. Registrieren Sie einfach ein Scrollbar -Event:
Die Codekopie lautet wie folgt:
scrollbottomTest = function () {
$ ("#content"). scroll (function () {
var $ this = $ (this),
ViewH = $ (this) .height (), // sichtbare Höhe
contentH = $ (this) .get (0) .ScrollHeight, // Inhaltshöhe
scrolltop = $ (this) .Scrolltop (); // scrollhöhe
// if (continh - viewH - scrolltop <= 100) {// beim Erreichen der unteren 100px neuen Inhalt laden
if (scrolltop/(contenth -viewh)> = 0,95) {// beim Erreichen des unteren 100px neuen Inhalt laden
// Die Daten hier laden ..
}
});
}
PS: Hier empfehle ich ein Online -Query -Tool zu JS -Ereignissen, das die häufig verwendeten Ereignisarten und Funktionsfunktionen von JS zusammenfasst:
Eine vollständige Liste von JavaScript -Ereignissen und -Funktionen:
http://tools.vevb.com/table/javascript_event