Unendliches Scrollen in JavaScript
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!"
....
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn