Wie erkennt man das Ende des Bildlaufs in einem scrollbaren Div mit jQuery?

Erkennen des Scrollendes in einem scrollbaren Div mit jQuery

Bei der Arbeit mit dynamischen Inhalten kann es sein, dass Sie mehr Inhalte laden müssen Der Benutzer scrollt zum Ende eines Containerelements. jQuery bietet eine bequeme Möglichkeit, dieses Ereignis für Divs mit aktiviertem Scrollen zu erkennen.

Um festzustellen, wann der Benutzer das Ende eines Divs erreicht hat, können Sie die Summe von scrollTop und innerHeight des Elements mit seiner scrollHeight:

<code class="javascript">if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
  // End of scroll reached
}</code>

Code-Implementierung:

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

Erklärung:

scrollTop gibt die Anzahl der Pixel zurück Element wurde vertikal gescrollt.
• innerHeight ruft die innere Höhe des Elements ab, ohne Bildlaufleisten.
• scrollWidth stellt die Gesamthöhe des Inhalts des Elements dar, einschließlich Bereiche außerhalb des Ansichtsfensters.

Wenn die Summe aus scrollTop und innerHeight gleich scrollHeight ist, zeigt dies an, dass der Benutzer bis zum Ende des Div gescrollt hat.

Zusätzlicher Hinweis:

In früheren Versionen von jQuery wurde bind() zum Anhängen von Ereignishandlern verwendet. Laut Dokumentation ist on() jedoch ab jQuery 1.7 die bevorzugte Methode.

Das obige ist der detaillierte Inhalt vonWie erkennt man das Ende des Bildlaufs in einem scrollbaren Div mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!