Wie erkennt man, wenn ein Benutzer zum Ende einer Webseite gescrollt hat?

Bestimmen der Scroll-Position des Browserfensters

Bei der Webentwicklung ist es oft notwendig zu erkennen, ob ein Benutzer das Ende einer Webseite erreicht hat. Dies ermöglicht das automatische Laden von Inhalten oder andere Aktionen basierend auf der Scroll-Position.

So erkennen Sie das Ende des Scrollens

Um festzustellen, ob ein Benutzer nach unten gescrollt hat einer Seite können Sie den window.onscroll-Ereignis-Listener verwenden. Dieses Ereignis wird jedes Mal ausgelöst, wenn ein Benutzer auf der Seite scrollt, sodass Sie die Scrollposition in Echtzeit verfolgen können.

Der folgende JavaScript-Codeausschnitt zeigt, wie das Ende des Scrollens erkannt wird:

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

Dieser Code berechnet die aktuelle Bildlaufhöhe, die sich aus der Summe der Ansichtsfensterhöhe (bestimmt durch window.innerHeight) und dem aktuellen Bildlaufversatz (berechnet durch Math.round(window.scrollY)) ergibt. Anschließend wird dieser Wert mit der Gesamthöhe des Dokuments verglichen, die mithilfe von document.body.offsetHeight ermittelt wird. Wenn diese berechnete Bildlaufhöhe größer oder gleich der Dokumenthöhe ist, zeigt dies an, dass sich der Benutzer am oder nahe dem unteren Rand der Seite befindet.

Demo

Die Der bereitgestellte Code kann in Kombination mit der Methode Element.scrollIntoView() verwendet werden, um einen Benutzer automatisch zum Ende eines Elements zu scrollen, wenn zusätzlicher Inhalt hinzugefügt wird.

Ein reales Beispiel dieser Funktionalität finden Sie hier zur folgenden Demo:

[Demo-Link]

Durch die Implementierung dieses Codes können Sie die Scroll-Position effektiv verfolgen und gewünschte Aktionen ausführen, z. B. das Laden neuer Inhalte oder das Ändern des Seitenverhaltens, wenn Benutzer darauf zugreifen am Ende einer Webseite.

Das obige ist der detaillierte Inhalt vonWie erkennt man, wenn ein Benutzer zum Ende einer Webseite gescrollt hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!