Maison >interface Web >js tutoriel >Comment puis-je déterminer la position de la barre de défilement en JavaScript ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-14 15:33:02269parcourir

How Can I Determine the Scrollbar Position in JavaScript?

Détermination basée sur JavaScript de la position de la barre de défilement

La détection de la position de la barre de défilement du navigateur est une tâche fondamentale pour comprendre l'emplacement actuel de la fenêtre. Plongeons dans les profondeurs de JavaScript pour explorer ce défi.

Dans un premier temps, on pourrait envisager de déterminer la position du pouce le long de la piste et de calculer sa hauteur en pourcentage de la hauteur totale de la piste. Cependant, JavaScript propose une approche plus simple.

Pour récupérer les décalages de défilement vertical et horizontal, utilisez les propriétés element.scrollTop et element.scrollLeft. Si vous êtes intéressé par la page entière, utilisez document.body comme élément. Pour les calculs de pourcentage, comparez ces décalages à element.offsetHeight et element.offsetWidth (l'élément reste le corps ou tout autre élément pertinent).

Exemple :

// Get the vertical scroll offset
let verticalOffset = document.body.scrollTop;

// Get the horizontal scroll offset
let horizontalOffset = document.body.scrollLeft;

// Calculate the vertical scroll percentage
let verticalPercentage = verticalOffset / document.body.offsetHeight * 100;

// Calculate the horizontal scroll percentage
let horizontalPercentage = horizontalOffset / document.body.offsetWidth * 100;

// Utilize the obtained percentages for your desired functionality

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!

Déclaration:
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