Maison > interface Web > js tutoriel > Comment détecter si l'utilisateur a fait défiler vers le bas d'une page avec du contenu dynamique ?

Comment détecter si l'utilisateur a fait défiler vers le bas d'une page avec du contenu dynamique ?

Mary-Kate Olsen
Libérer: 2024-11-09 04:45:02
original
935 Les gens l'ont consulté

How to Detect if the User Has Scrolled to the Bottom of a Page with Dynamic Content?

Détection de la position de défilement en bas de page pour le chargement de contenu dynamique

Lors de la gestion du contenu dynamique sur une page Web, il est crucial de déterminer si l'utilisateur a défilé vers le bas. Cette connaissance permet aux développeurs de faire défiler automatiquement la page vers le contenu nouvellement ajouté ou d'éviter d'interrompre l'expérience de navigation actuelle de l'utilisateur.

Pour détecter la position de défilement de l'utilisateur, JavaScript fournit une solution robuste :

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

Ce code attache un écouteur d'événement à l'événement window.onscroll. Chaque fois que l'utilisateur fait défiler, l'auditeur calcule la position de défilement actuelle et la compare à la hauteur totale de la page. Si la somme de la hauteur de la fenêtre d'affichage et du décalage de défilement est égale ou supérieure à la hauteur de la page, cela indique que l'utilisateur a atteint le bas de la page.

En mettant en œuvre cette solution, vous pouvez vous assurer que le nouveau contenu est ajouté à la page sans interrompre l'expérience de lecture en cours de l'utilisateur, tout en permettant simultanément un défilement sans effort vers le contenu nouvellement chargé lorsque l'utilisateur atteint le bas.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal