Comment détecter lorsqu'un utilisateur a fait défiler vers le bas d'une division à l'aide de jQuery ?

Détection du défilement vers le bas d'un div à l'aide de jQuery

Lorsque vous travaillez avec du contenu à hauteur variable dans un div avec débordement automatique, déterminer lorsqu'un utilisateur atteint le bas du div peut être un défi. Cet article fournit une solution utilisant jQuery pour détecter cet événement.

Comprendre les dimensions d'un div

Pour détecter lorsqu'un utilisateur fait défiler vers le bas d'un div, il est crucial de comprendre les propriétés et méthodes associées aux dimensions div.

• scrollTop() : renvoie le nombre de pixels dont le contenu a défilé verticalement.
• innerHeight() : renvoie la hauteur intérieure du div, à l'exclusion des barres de défilement et des bordures.
• scrollHeight : renvoie la hauteur totale du contenu du div, y compris le contenu masqué.

Détection de l'événement de défilement inférieur

Le code jQuery suivant peut détecter le moment où l'utilisateur a atteint le bas du div :

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

Explication du Code

• $(#flux) : Sélectionne le div avec l'ID "flux."
• on ('scroll') : lie l'événement de défilement au div.

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

  • Vérifie si la somme de la position de défilement actuelle et de la hauteur intérieure est supérieure ou égale à la hauteur totale du contenu.
  • Si elle est vraie, cette condition indique que l'utilisateur a fait défiler l'écran jusqu'au bas ou au-delà du bas du div.
• alert('end reach') : affiche un message d'alerte lorsque la fin du contenu est atteinte.

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!