Wie erkennt man mit jQuery, wann ein Benutzer zum Ende eines Divs gescrollt hat?

Erkennen des Scrollens bis zum Ende eines Divs mithilfe von jQuery

Bei der Arbeit mit Inhalten variabler Höhe innerhalb eines Divs mit automatischem Überlauf wird ermittelt Wenn ein Benutzer das Ende der Div erreicht, kann es eine Herausforderung sein. Dieser Artikel bietet eine Lösung, die jQuery verwendet, um dieses Ereignis zu erkennen.

Div-Dimensionen verstehen

Um zu erkennen, wenn ein Benutzer zum Ende eines Divs scrollt, ist es wichtig zu verstehen die Eigenschaften und Methoden, die mit div-Dimensionen verknüpft sind.

• scrollTop(): Gibt die Anzahl der Pixel zurück, um die der Inhalt vertikal nach unten gescrollt wurde.
• innerHeight(): Gibt die innere Höhe des Div zurück, ohne Bildlaufleisten und Ränder.
• scrollHeight: Gibt die Gesamthöhe des Div-Inhalts zurück, einschließlich versteckter Inhalte.

Erkennen des Bottom Scroll-Ereignisses

Der folgende jQuery-Code kann erkennen, wann der Benutzer das Ende des Div erreicht hat:

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

Erläuterung des Codes

• $(#flux): Wählt das Div mit der ID „flux“ aus.
• on ('scroll'): Bindet das Scroll-Ereignis an das Div.

• if($(this).scrollTop() $(this).innerHeight() >= $(this)[0].scrollHeight):

  • Überprüft, ob die Summe aus der aktuellen Scrollposition und der inneren Höhe größer oder gleich der gesamten Inhaltshöhe ist.
  • Wenn wahr, zeigt diese Bedingung an, dass der Benutzer zum unteren Rand des Divs oder darüber hinaus gescrollt hat.
• Alert('Ende erreicht'): Zeigt eine an Warnmeldung, wenn das Ende des Inhalts erreicht ist.

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