Comment détecter lorsqu'un utilisateur a atteint le bas d'une division à contenu variable à l'aide de jQuery ?

Détection de la fin du défilement div avec jQuery

Objectif :
Déterminer quand un utilisateur fait défiler vers le bas d'un élément div spécifié.

Question :
Comment puis-je détecter lorsqu'un utilisateur atteint le bas d'un div avec une quantité variable de contenu et un débordement défini sur automatique ?

Réponse :

Pour détecter la fin du défilement div, utilisez les propriétés/méthodes jQuery suivantes :

• $(). scrollTop() : renvoie la quantité de défilement horizontal ou vertical de l'élément.
• $().innerHeight() : renvoie la hauteur intérieure de l'élément.
• DOMElement.scrollHeight : renvoie la hauteur du contenu de l'élément.

Combinez les deux premières propriétés pour obtenir la hauteur totale visible et comparez-la à scrollHeight pour déterminer lorsque l'utilisateur a fait défiler vers le bas.

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

Notes supplémentaires :

• Le code fourni utilise la syntaxe jQuery 1.7. Pour les anciennes versions, utilisez .bind() au lieu de .on().
• Cette solution fonctionnera correctement même si le contenu à l'intérieur du div est ajouté ou supprimé dynamiquement.
• Ajustez le gestionnaire d'événements à votre conteneur et à votre action préférés.

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!