Heim > Web-Frontend > js-Tutorial > Wie erkennt man mit jQuery, wann ein Benutzer das Ende eines Divs mit variablem Inhalt erreicht hat?

Wie erkennt man mit jQuery, wann ein Benutzer das Ende eines Divs mit variablem Inhalt erreicht hat?

Linda Hamilton
Freigeben: 2024-10-30 20:00:03
Original
424 Leute haben es durchsucht

How to Detect When a User Has Reached the Bottom of a Div with Variable Content Using jQuery?

Erkennen des Scrollens am Ende eines Div mit jQuery

Ziel:
Bestimmen, wann ein Benutzer nach unten scrollt eines angegebenen div-Elements.

Frage:
Wie kann ich erkennen, wenn ein Benutzer das Ende eines div mit einer variablen Menge an Inhalten erreicht und der Überlauf auf „Automatisch“ eingestellt ist?

Antwort:

Um das Ende des Div-Scrollens zu erkennen, verwenden Sie die folgenden jQuery-Eigenschaften/-Methoden:

  • $(). scrollTop(): Gibt den Betrag zurück, um den das Element horizontal oder vertikal gescrollt wurde.
  • $().innerHeight(): Gibt die innere Höhe des Elements zurück.
  • DOMElement.scrollHeight: Gibt die Höhe des Elementinhalts zurück.

Kombinieren Sie die ersten beiden Eigenschaften, um die gesamte sichtbare Höhe zu erhalten, und vergleichen Sie sie zur Bestimmung mit der scrollHeight wenn der Benutzer nach unten gescrollt hat.

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

Zusätzliche Hinweise:

  • Der bereitgestellte Code verwendet die jQuery 1.7-Syntax. Verwenden Sie für ältere Versionen .bind() anstelle von .on().
  • Diese Lösung funktioniert auch dann ordnungsgemäß, wenn der Inhalt innerhalb des Div dynamisch hinzugefügt oder entfernt wird.
  • Passen Sie den Ereignishandler an zu Ihrem bevorzugten Behälter und Ihrer bevorzugten Aktion.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage