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
Barbara Streisandoriginal
2024-10-18 17:17:30776parcourir

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>

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!

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