web-dev-qa-db-fra.com

body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY

Lorsque vous essayez de savoir combien une page Web a été défilée du haut, laquelle de celles-ci devrait-on utiliser:

document.body.scrollTop,

document.documentElement.scrollTop,

window.pageYOffset,

window.scrollY

Lequel (s) devrais-je choisir dans ces 2 scénarios distincts:

a) Si je voulais une compatibilité maximale (entre les principaux navigateurs utilisés actuellement)?

b) Si je voulais un code qui soit le plus conforme aux normes/à l'épreuve du temps/compatible avec le mode strict (mais qui ne se souciait pas de la prise en charge de navigateurs anciens/non standard)?

javascriptcross-browserscrolltop
35
Himanshu P

J'en utilise trois dans la source skrollr

return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

https://github.com/Prinzhorn/skrollr/blob/b98d40820b9864be275e81af382045d72cc5a08a/src/skrollr.js#L627

a) Jusqu'à présent, cela fonctionne sur tous les navigateurs (personne ne s'est plaint au cours de la dernière année).

b) Puisqu'il utilisera le premier qui est défini, je suppose que c'est assez à l'épreuve du temps et stable.

Si vous avez envie, vous pouvez aussi le faire

Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
26
Prinzhorn

Pour Prinzhorn répondez:

Puisque body et documentElement est undefined dans Chrome/Firefox, mieux utiliser:

return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

Je me suis testé.

3
Tom

Étant donné que skrollr n'utilise pas window.scrollY, cela était peut-être évident, mais comme autre réponse à la question initiale: window.pageYOffset est un alias pour window.scrollY. Voir Window.scrollY .

3
jasonklein