logo标签列表

scrollY和scrollTop的区别

javascript
5
scrollY和scrollTop有什么区别？scrollX和scrollLeft有什么区别？
window.addEventListener('scroll', ()=>{
    console.log(document.querySelector('html[lang="en"]').scrollTop) //Same Result
    console.log(window.scrollY)
})
2个回答
4

scrollY/X - (基于窗口) Window接口的只读scrollY属性返回文档当前垂直滚动的像素数，你可以通过scrollX属性获取文档水平滚动的像素数。

scrollTop/Left - (基于元素) scrollLeft和scrollTop属性返回元素内容从其左边缘和顶部滚动的像素数。

前者使用window对象而后者使用DOM元素。

Mozilla -> 注意: 当在根元素(即<html>元素)上使用scrollTop时，会返回窗口的scrollY。这是scrollTop的特殊情况。

因此，在您的情况下，在根html元素上使用时似乎没有区别。

1

ScrollTop 基本上可以获取和设置，而 window 的 scrollY 只能获取。ScrollTop 是元素的属性，而 ScrollY 是窗口的属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接