Comment déterminer la position de la barre de défilement en JavaScript ?

Détermination de la position de la barre de défilement avec JavaScript

Lors de la navigation sur une page Web, il est souvent nécessaire de déterminer la position de la barre de défilement pour comprendre la vue actuelle . Contrairement à votre intuition initiale, JavaScript fournit une solution simple sans avoir besoin de calculer les dimensions du pouce et du suivi.

Solution :

JavaScript offre les propriétés scrollTop et scrollLeft pour les éléments, comme le document.body qui représente la page entière. Ces propriétés fournissent respectivement les positions de défilement verticale et horizontale.

Pour obtenir le pourcentage de décalage de la barre de défilement, vous pouvez comparer la position de défilement à la hauteur ou à la largeur totale de l'élément. Pour la page, utilisez document.body.offsetHeight et document.body.offsetWidth en conséquence.

Exemple de code :

// Get the scrollbar position from the body
var scrollTop = document.body.scrollTop;
var scrollLeft = document.body.scrollLeft;

// Calculate the percentage offset of the scrollbar
var percentScrollTop = scrollTop / (document.body.scrollHeight - document.body.offsetHeight);
var percentscrollLeft = scrollLeft / (document.body.scrollWidth - document.body.offsetWidth);

En utilisant scrollTop et scrollLeft, vous pouvez Déterminez sans effort la position actuelle de la barre de défilement et son pourcentage de décalage correspondant, ce qui facilite l'amélioration de l'interaction de vos applications Web avec le défilement des pages.

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!