Comment détecter la position de défilement en bas d'une page Web à l'aide de JavaScript ?

Utilisation de JavaScript pour détecter la position de défilement en bas de page

Pour déterminer si un utilisateur a fait défiler vers le bas d'une page Web, JavaScript offre une solution puissante. Ceci est crucial pour déclencher le défilement automatique lorsqu'un nouveau contenu est ajouté en bas tout en évitant d'interrompre les utilisateurs qui sont en train de lire le contenu précédent plus haut sur la page.

Solution : Surveillance des événements de défilement

Pour surveillez le comportement de défilement de l'utilisateur et déterminez sa position actuelle, vous pouvez implémenter un écouteur d'événement onscroll sur l'objet fenêtre :

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

Dans cet événement handler:

• window.innerHeight représente la hauteur visible de la fenêtre du navigateur.
• Math.round(window.scrollY) renvoie la position actuelle de défilement vertical, arrondie à l'entier le plus proche.
• document.body.offsetHeight représente la hauteur totale de la page contenu.

En comparant la somme de la hauteur visible et de la position de défilement à la hauteur du contenu de la page, vous pouvez déterminer si l'utilisateur a atteint le bas. Si la somme est supérieure ou égale à la hauteur de la page, l'utilisateur est en bas.

Conclusion

Grâce à l'événement onscroll de JavaScript et à un calcul simple, vous pouvez détecter avec précision quand un utilisateur a défilé vers le bas d’une page Web. Cela vous permet de mettre en œuvre un comportement contextuel, tel que le défilement automatique ou la mise à jour du contenu en fonction de la position de l'utilisateur.

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!