scrollTop, offsetTop, pageYOffset, scrollY,有啥区别?

发布:elantion 日期:2019-09-23 阅读:146 评论:0

scrollTop

DOM对象的scrollTop用于获取或者设置一个元素里滚动的距离(垂直)。例如:document.documentElement.scrollTop可以获取当前页面的滚动高度,也可以获取某个DOM元素的滚动距离,例如:document.querySelector('.content').scrollTop,前提是.content元素存在,并且可以滚动。
另外,scrollTop还可以把滚动条移到指定位置,例如:

// 回到顶部
document.documentElement.scrollTop = 0;

offsetTop

DOM对象的offsetTopscrollTop完全不同,它是上边框相对于父元素上边框的距离,一般是固定的,不随滚动变化。

pageYOffset 和 scrollY

这两个都能返回视窗滚动过的距离,相对来说,pageYOffset兼容性更好,一般我们只用 pageYOffset就行。但两者都不兼容IE9以下,另外 scrollY 可以赋值,让视窗滚动到指定位置。
scrollTop不同,pageYOffset只存在window对象里,一般会有下面等式:

document.documentElement.scrollTop === window.pageYOffset === scrollY

参考

https://medium.com/@daniwhkim/how-do-i-get-set-top-position-of-elements-scrolltop-offsettop-pageyoffset-scrolly-help-275a7ada5569#targetText=pageYOffset%20is%20a%20read%2Donly,is%20the%20exactly%20same%20thing.