Wie erkennt man, wenn ein Benutzer in jQuery zum Ende eines Div scrollt?

So erkennen Sie, wenn ein Benutzer mit jQuery zum Ende von Div scrollt

Sie haben ein Div-Element mit dynamischem Inhalt erstellt, das ein „ „Automatisch“-Überlaufeinstellung. Um das Benutzererlebnis zu verbessern, möchten Sie zusätzlichen Inhalt laden, wenn der Benutzer zum Ende dieser Div-Box scrollt. Sie sind sich jedoch nicht sicher, wie Sie dieses bestimmte Ereignis erkennen können.

Der Schlüssel zu dieser Erkennung liegt in der Verwendung spezifischer jQuery-Eigenschaften und -Methoden:

• $().scrollTop(): Gibt die Anzahl der Pixel an, um die das Element gescrollt wurde
• $().innerHeight(): Stellt die innere Höhe des Elements dar
• DOMElement.scrollHeight: Gibt die Höhe des Elementinhalts zurück

Um festzustellen, wann der Benutzer das Ende des Div erreicht hat, können Sie die Summe der ersten beiden Eigenschaften mit der dritten Eigenschaft vergleichen. Wenn diese Werte übereinstimmen, ist das Ende des Div erreicht.

<code class="javascript">jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});</code>

Diese Lösung nutzt die on()-Methode, die für die Ereignisbehandlung in jQuery-Versionen 1.7 bevorzugt wird.

Zusätzliche Hinweise:

• Der Ereignis-Listener wird mit der #flux-ID an das Div angehängt, das das Element darstellt, das Sie überwachen möchten.
• Die Warnung ()-Funktion wird zu Demonstrationszwecken verwendet. Sie können hier Ihre eigene Logik zum Laden zusätzlicher Inhalte einfügen.
• Ein Live-Beispiel finden Sie unter http://jsfiddle.net/doktormolle/w7X9N/.

Das obige ist der detaillierte Inhalt vonWie erkennt man, wenn ein Benutzer in jQuery zum Ende eines Div scrollt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!