Heim > Web-Frontend > js-Tutorial > Hauptteil

JS-Methode, um festzustellen, ob die Bildlaufleiste bis zum Ende der Seite gescrollt wurde, und um die Fähigkeiten „event_javascript' auszuführen

WBOY
Freigeben: 2016-05-16 16:25:39
Original
1673 Leute haben es durchsucht

Sie müssen drei Dom-Elemente verstehen, nämlich: clientHeight, offsetHeight und scrollTop.

clientHeight: Die Höhe dieses Elements nimmt die Höhe des gesamten Bereichs ein. Wenn ein Div über eine Bildlaufleiste verfügt, umfasst die Höhe daher nicht den Inhalt unterhalb der Bildlaufleiste, der nicht angezeigt wird. 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 Pixel 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:

Code kopieren Der Code lautet wie folgt:

scrollBottomTest =function(){
$("#contain").scroll(function(){
        var $this =$(this),
​​​​viewH =$(this).height(),//Sichtbare Höhe
contentH =$(this).get(0).scrollHeight,//Inhaltshöhe
         scrollTop =$(this).scrollTop();//Scrollhöhe
//if(contentH - viewH - scrollTop <= 100) { //Bei Erreichen der unteren 100 Pixel neuen Inhalt laden
If(scrollTop/(contentH -viewH)>=0.95){ //Bei Erreichen der unteren 100 Pixel neuen Inhalt laden
//Daten hier laden..
}
});
}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage