So erkennen Sie, wann der 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ätzliche Inhalte 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 bestimmter 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 element
• 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 vergleichen zur dritten Immobilie. Wenn diese Werte übereinstimmen, ist das Ende des Div erreicht.

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

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.
• Der Die Funktion „alert()“ 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/.