Comment détecter lorsque l'utilisateur fait défiler vers le bas d'une division avec jQuery

Vous avez créé un élément div avec un contenu dynamique qui comporte un " réglage de trop-plein automatique. Pour améliorer l'expérience utilisateur, vous souhaitez charger du contenu supplémentaire lorsque l'utilisateur fait défiler vers le bas de cette boîte div. Cependant, vous ne savez pas comment détecter cet événement spécifique.

La clé de cette détection réside dans l'utilisation de propriétés et de méthodes jQuery spécifiques :

• $().scrollTop() : Indique le nombre de pixels sur lequel l'élément a défilé.
• $().innerHeight() : Représente la hauteur intérieure de l'élément. element
• DOMElement.scrollHeight : renvoie la hauteur du contenu de l'élément

Pour déterminer quand l'utilisateur a atteint le bas du div, vous pouvez comparer la somme des deux premières propriétés à la troisième propriété. Lorsque ces valeurs correspondent, la fin du div a été atteinte.

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

Cette solution utilise la méthode on(), qui est préférée pour la gestion des événements dans les versions 1.7 de jQuery.

Notes supplémentaires :

• L'écouteur d'événements est attaché au div avec l'ID #flux, qui représente l'élément que vous souhaitez surveiller.
• La fonction alert() est utilisée à des fins de démonstration fins. Vous pouvez inclure votre propre logique pour charger du contenu supplémentaire ici.
• Un exemple en direct peut être trouvé sur http://jsfiddle.net/doktormolle/w7X9N/.