Maison > interface Web > js tutoriel > Comment obtenir la position de la barre de défilement en JavaScript ?

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

Barbara Streisand
Libérer: 2024-11-14 16:30:02
original
220 Les gens l'ont consulté

How to Get the Scrollbar Position in JavaScript?

Obtention de la position de la barre de défilement avec JavaScript

Pour déterminer la position d'affichage actuelle sur une page Web, vous pouvez vérifier la position de la barre de défilement à l'aide de JavaScript. Ce guide montrera comment y parvenir.

Pour obtenir la position de la barre de défilement, vous pouvez utiliser les propriétés element.scrollTop et element.scrollLeft. Ces propriétés renvoient respectivement le décalage vertical et horizontal de l'élément element qui a défilé. Si vous êtes intéressé par la page complète, l'élément peut être défini sur document.body.

Pour déterminer les pourcentages, vous pouvez comparer les valeurs de décalage à element.offsetHeight et element.offsetWidth. Encore une fois, l'élément peut être le corps du document.

Voici un exemple d'extrait de code qui démontre l'utilisation de ces propriétés :

// Get the vertical scroll position of the document
const verticalScrollPos = document.body.scrollTop;

// Get the horizontal scroll position of the document
const horizontalScrollPos = document.body.scrollLeft;

// Get the height and width of the document
const documentHeight = document.body.offsetHeight;
const documentWidth = document.body.offsetWidth;

// Calculate the percentage of the vertical scroll position
const verticalScrollPercentage = (verticalScrollPos / documentHeight) * 100;

// Calculate the percentage of the horizontal scroll position
const horizontalScrollPercentage = (horizontalScrollPos / documentWidth) * 100;
Copier après la connexion

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