HOWTO · JavaScript
Unendliches Scrollen in JavaScript
Im heutigen Beitrag lernen wir das unendliche Scrollen in JavaScript kennen.
Unendliches Scrollen ist eine Webdesign-Technik, die kontinuierlich Inhalte lädt, während der Benutzer die Seite nach unten scrollt. Dadurch entfällt die Paginierung.
Der Erfolg des endlosen Scrollens auf Social-Networking-Sites wie Twitter hat diese Technik populär gemacht, aber das bedeutet nicht, dass Sie sie verwenden sollten.
Kontinuierliches Scrollen ist vorteilhaft für ständig gestreamte Inhalte und hat eine relativ flache Struktur, bei der jede Inhaltseinheit der gleichen Hierarchieebene angehört und ähnliche Chancen hat, für Benutzer interessant zu sein.
Im heutigen Beitrag lernen wir das unendliche Scrollen in JavaScript kennen.
Unendliches Scrollen in JavaScript
Die Eigenschaft onscroll des Mixins GlobalEventHandlers ist ein Event-Handler, der scroll-Ereignisse verarbeitet.
Das Ereignis Scroll wird ausgelöst, wenn die Dokumentansicht oder ein Element vom Benutzer, einer Web-API oder dem Benutzeragenten gescrollt wurde.
Syntax:
target.onscroll = functionRef
Die functionRef ist ein Funktionsname oder Funktionsausdruck. Die Funktion nimmt ein UIEvent-Objekt als einziges Argument.
Sie können einem Objekt immer nur einen onscroll-Handler zuweisen.
Wenn mehr als ein Handler erforderlich ist, können Sie stattdessen die Methode EventTarget.addEventListener() verwenden und das Ereignis scroll an den Listener übergeben. Weitere Informationen zum window.onscroll finden Sie hier.
Lassen Sie es uns anhand eines Beispiels verstehen.
<body>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
</body>
var body = document.querySelector('body');
body.onscroll = function() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log('It\'s working!');
body.style.height = document.body.offsetHeight + 100 + 'px';
}
}
Im obigen Beispiel haben wir 10 Absatz-Tags im Hauptteil des HTML-DOM definiert. Jedes Mal, wenn body gerendert wird und der Benutzer nach unten scrollt, prüfen wir die Anzahl der Pixel, um die das Dokument gerade vertikal gescrollt wird.
Wenn es größer ist als die Höhe von body und window, hängen wir 100px an die aktuelle Höhe von body an. Führen Sie das obige Code-Snippet in einem Browser aus, der JavaScript unterstützt. Es wird das folgende Ergebnis in der Konsole ausgeben.
Ausgang:
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
....
