美文网首页
scrollTop, offsetTop, pageYOffse

scrollTop, offsetTop, pageYOffse

作者: 小边_leo | 来源:发表于2020-06-30 21:56 被阅读0次

scrollTop

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

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

offsetTop

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

pageYOffset 和 scrollY

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

看下面等式:

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

相关文章

网友评论

      本文标题:scrollTop, offsetTop, pageYOffse

      本文链接:https://www.haomeiwen.com/subject/icmfqktx.html