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

岁酱吖の 提交于 2019-12-20 08:56:30

问题


When trying to find out how much a web page has been scrolled from the top, which of these should one use:

document.body.scrollTop,

document.documentElement.scrollTop,

window.pageYOffset,

window.scrollY

Which one(s) would I choose in these 2 separate scenarios:

a) If I wanted maximum compatibility (across the main browsers used currently)?

b) If I wanted code that was most standards compliant/future-proof/strict-mode-compatible (but didn't care about supporting old/non-standard browsers)?


回答1:


I'm using three of them in the skrollr source

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

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

a) So far it's working across all browsers (nobody complaint in the past year).

b) Since it will use the first one that is defined, I guess it's pretty future proof and stable.

If you're fancy you could do this as well

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



回答2:


Given that skrollr does not use window.scrollY, this may have been obvious, but as further answer to the original question: window.pageYOffset is an alias for window.scrollY. See Window.scrollY.




回答3:


To Prinzhorn's answear:

Since body and documentElement is undefined in Chrome/Firefox, better use:

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

Tested myself.




回答4:


Chrome uses documentElement.scrollTop, firefox uses body.scrollTop



来源:https://stackoverflow.com/questions/19618545/body-scrolltop-vs-documentelement-scrolltop-vs-window-pageyoffset-vs-window-scro

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!