Comment détecter lorsqu'un utilisateur a fait défiler vers le bas d'une page Web ?

Détermination de la position de défilement de la fenêtre du navigateur

Dans le développement Web, il est souvent nécessaire de détecter si un utilisateur a atteint le bas d'une page Web. Cela permet le chargement automatique du contenu ou d'autres actions basées sur la position de défilement.

Comment détecter la fin du défilement

Pour déterminer si un utilisateur a fait défiler vers le bas d'une page, vous pouvez utiliser l'écouteur d'événements window.onscroll. Cet événement se déclenche chaque fois qu'un utilisateur fait défiler la page, vous permettant de suivre la position de défilement en temps réel.

L'extrait de code JavaScript suivant montre comment détecter la fin du défilement :

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

Ce code calcule la hauteur de défilement actuelle, qui est la somme de la hauteur de la fenêtre (déterminée par window.innerHeight) et du décalage de défilement actuel (calculé par Math.round(window.scrollY)). Il compare ensuite cette valeur à la hauteur totale du document, obtenue à l'aide de document.body.offsetHeight. Si cette hauteur de défilement calculée est supérieure ou égale à la hauteur du document, cela indique que l'utilisateur se trouve au bas ou près du bas de la page.

Démo

La Le code fourni peut être utilisé en combinaison avec la méthode Element.scrollIntoView() pour faire défiler automatiquement un utilisateur vers le bas d'un élément lorsqu'un contenu supplémentaire est ajouté.

Pour un monde réel exemple de cette fonctionnalité, veuillez vous référer à la démo suivante :

[Demo Link]

En implémentant ce code, vous pouvez suivre efficacement la position de défilement et effectuer les actions souhaitées, telles que le chargement d'un nouveau contenu ou modifier le comportement de la page, lorsque les utilisateurs atteignent le bas d'une page Web.

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!