📌  相关文章
📜  HTML |窗口 pageYOffset 属性(1)

📅  最后修改于: 2023-12-03 15:31:16.157000             🧑  作者: Mango

HTML | 窗口 pageYOffset 属性

简介

pageYOffset 属性返回当前文档在垂直方向上滚动条已滚动的距离。

语法
window.pageYOffset
返回值

属性的值为浮点型，表示页面已经滚动的垂直距离，单位为像素。如果文档的顶部出现在视口的顶部，则返回0。

示例
<!DOCTYPE html>
<html>
<body>

<h1>随意滚动本页面</h1>

<p>已经滚动了: <span id="result"></span> 像素。</p>

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  var y = window.pageYOffset;
  document.getElementById("result").innerHTML = y;
}
</script>

</body>
</html>

在上述代码中，window.onscroll 事件会在页面滚动时被触发，调用 myFunction() 函数。此函数将 pageYOffset 属性的值赋值给 ID 为 result 的元素。通过这种方式，可以实时显示页面上已滚动的距离。

兼容性

pageYOffset 属性有很好的浏览器支持，包括 Chrome、Firefox、Edge 和 Safari 等主流浏览器，但不支持 IE。对于 IE，可以使用 scrollTop 属性来代替。因此，在编写代码时，需要根据具体情况选择适当的属性。

总结

通过 pageYOffset 属性，可以方便地获取已滚动页面的垂直距离。它是实现一些滚动效果的基础，可以帮助开发者更灵活更自由地控制滚动行为。