Maison > interface Web > js tutoriel > La méthode scrolltop en JS parfaitement compatible avec les principales compétences des navigateurs_javascript

La méthode scrolltop en JS parfaitement compatible avec les principales compétences des navigateurs_javascript

WBOY
Libérer: 2016-05-16 16:03:10
original
1158 Les gens l'ont consulté

1. Différences de scrollTop entre les navigateurs

IE6/7/8/9/10 :

Pour les pages sans déclaration doctype, vous pouvez utiliser document.body.scrollTop pour obtenir la hauteur scrollTop
Pour les pages avec déclaration doctype, vous pouvez utiliser document.documentElement.scrollTop ;

Safari :

Safari est assez spécial, il a sa propre fonction pour obtenir scrollTop : window.pageYOffset

Firefox :

Firefox et d'autres navigateurs relativement standards sont beaucoup plus faciles à gérer. Utilisez simplement document.documentElement.scrollTop

;

2. Obtenez la valeur scrollTop

Obtenez parfaitement la phrase d'affectation scrollTop :

Copier le code Le code est le suivant :

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

La valeur scrollTop peut être obtenue en toutes circonstances grâce à cette affectation.

Regardez attentivement cette mission, remarquez-vous quelque chose ? ?
C'est vrai, window.pageYOffset (Safari) est placé au milieu de ||.

Parce que lorsque le nombre 0 est associé à un OU avec undefine, le système renvoie la dernière valeur par défaut. Autrement dit, 0 == non défini en opération OU ;

Lorsque la barre de défilement de la page est juste en haut, c'est-à-dire lorsque la valeur scrollTop est 0, window.pageYOffset (Safari) sous IE revient à undefine. À ce moment, lorsque window.pageYOffset (Safari) est placé à. À la fin de l'opération OU, scrollTop renvoie undefine, si undefine est utilisé dans l'opération suivante, une erreur sera signalée.

Les autres navigateurs ne renverront pas undefine, quelle que soit l'affectation de scrollTop ou l'ordre des opérations. Il peut être utilisé en toute sécurité..

Donc au final, c'est toujours le problème d'IE, bon sang...

Je suis un peu confus, je ne sais pas si je peux m'exprimer clairement.
Mais au final, j'ai conclu que cette phrase a été testée et qu'elle est correcte, vous pouvez donc l'utiliser en toute confiance.

Copier le code Le code est le suivant :

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

C'est la déclaration d'affectation parfaite pour obtenir scrollTop.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal