Explication détaillée de scrollTop dans les compétences javascript_javascript

scrollTop représente la hauteur du défilement. Par défaut, le défilement commence à partir de la position :0;. Le décalage de scrollTop (offset) représente le décalage par rapport au haut, en pixels,

La hauteur de défilement de scrollTop() peut à la fois « définir » la valeur de défilement et « obtenir » la valeur de défilement.
Lorsqu'une valeur de défilement est définie, cette méthode définit la valeur de défilement pour tous les éléments correspondants.
Lors de l'obtention de la valeur de défilement, cette méthode renvoie uniquement la position de défilement du premier élément correspondant.
Pour obtenir la valeur de scrollTop, vous pouvez vous référer au code suivant :

Copier le code Le code est le suivant :

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

1. Différences de scrollTop entre les navigateurs

IE6/7/8 :
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 spécial, il a sa propre fonction pour obtenir scrollTop : window.pageYOffset
Firefox :
Firefox et d'autres navigateurs relativement standards sont beaucoup plus sereins, 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.
Observez 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 OR
Lorsque la barre de défilement de la page est juste en haut, c'est-à-dire lorsque la valeur scrollTop est 0. Sous IE, window.pageYOffset (Safari) renvoie undefine. À ce moment, lorsque window.pageYOffset (Safari) est placé à la fin de l'opération OR, scrollTop renvoie undefine. Si undefine est utilisé dans l'opération suivante, une erreur sera générée. signalé.
Les autres navigateurs ne renverront pas undefine, quelle que soit l'affectation de scrollTop ou l'ordre d'opération. 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 OK, 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;

Instructions liées à la DTD :

Lorsque la page a une DTD ou que DOCTYPE est spécifié, utilisez document.documentElement.

Lorsque la page n'a pas de DTD ou que DOCTYPE n'est pas spécifié, document.body est utilisé.

Cela est vrai dans IE et Firefox.

Pour des raisons de compatibilité, qu'il existe ou non une DTD, vous pouvez utiliser le code suivant :

Copier le code Le code est le suivant :

var scrollTop = window.pageYOffset //pour FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;

Instructions liées au DocumentElement et au corps :

body est le nœud enfant du corps dans l'objet DOM, c'est-à-dire la balise

documentElement est la racine du nœud racine de l'ensemble de l'arborescence des nœuds, qui est la balise

DOM appelle chaque objet de la hiérarchie un nœud, qui est une structure hiérarchique. Vous pouvez le comprendre comme une structure arborescente, tout comme notre répertoire, un répertoire racine, et il y a des sous-répertoires sous le répertoire racine. sous le répertoire.

Prenons l'exemple du langage de balisage hypertexte HTML : une racine du document entier est accessible à l'aide de document.documentElement dans le DOM. Il s'agit du nœud racine de l'arborescence des nœuds entière. Le corps est un nœud enfant Pour accéder à la balise body, vous devez écrire : document.body dans le script.

Si vous souhaitez cliquer sur le bouton pour faire défiler vers le haut de la page, utilisez jquery pour cliquer et exécuter le code $(document).scrollTop(0) pour faire défiler vers le haut.

La même position de défilement scrollLeft indique la position de défilement vers la gauche.

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