Comment détecter la fin du défilement dans un Div défilable avec jQuery ?

Détection de la fin du défilement dans une division défilante avec jQuery

Lorsque vous travaillez avec du contenu dynamique, vous pouvez rencontrer le besoin de charger plus de contenu comme l'utilisateur fait défiler vers le bas d'un élément conteneur. jQuery fournit un moyen pratique de détecter cet événement pour les divs avec le défilement activé.

Pour déterminer quand l'utilisateur a atteint le bas d'un div, vous pouvez comparer la somme des scrollTop et innerHeight de l'élément à sa scrollHeight :

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

Implémentation du code :

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

Explication :

• scrollTop renvoie le nombre de pixels l'élément a défilé verticalement.
• innerHeight récupère la hauteur intérieure de l'élément, à l'exclusion des barres de défilement.
• scrollWidth représente la hauteur totale du contenu de l'élément, y compris les zones en dehors de la fenêtre d'affichage.

Lorsque la somme de scrollTop et innerHeight est égale à scrollHeight, cela indique que l'utilisateur a fait défiler tout en bas du div.

Remarque supplémentaire :

Dans les versions antérieures de jQuery, bind() était utilisé pour attacher des gestionnaires d'événements. Cependant, selon la documentation, on() est la méthode préférée depuis jQuery 1.7.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!