Maison > interface Web > js tutoriel > Comment déterminer le pourcentage de défilement vertical entre navigateurs ?

Comment déterminer le pourcentage de défilement vertical entre navigateurs ?

Barbara Streisand
Libérer: 2024-10-18 17:17:30
original
782 Les gens l'ont consulté

How to Determine Vertical Scroll Percentage Cross-Browser?

Détermination multi-navigateurs du pourcentage de défilement vertical

Déterminer le pourcentage de la barre de défilement verticale par lequel un utilisateur s'est déplacé est une tâche cruciale dans le Web développement. Cet article étudie une méthode permettant d'obtenir cette compatibilité entre navigateurs modernes.

En utilisant l'événement 'onscroll' et en accédant à documentElement.scrollTop ou body.scrollTop, nous pouvons obtenir la position actuelle de la barre de défilement. De plus, documentElement.scrollHeight ou body.scrollHeight fournit la hauteur totale de la zone de défilement.

En combinant ces valeurs, nous pouvons calculer le pourcentage de défilement comme suit :

<code class="javascript">var percent = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;</code>
Copier après la connexion

Où :

  • h est l'objet documentElement
  • b est l'objet body
  • st est la propriété scrollTop
  • sh est la propriété scrollHeight

Cette méthode fournit une solution précise et compatible avec tous les navigateurs pour déterminer le pourcentage de défilement vertical. Il fonctionne bien dans Chrome, Firefox et IE9 , à l'exception du fait qu'il peut ne pas atteindre exactement 100 % sur certains navigateurs mobiles en raison du comportement de masquage automatique lors du défilement dans l'interface utilisateur du navigateur.

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
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