如何使用 JavaScript 获取滚动条的位置？

当网页内容超出浏览器视窗时，可以使用滚动条进行上下或左右滑动。有时候我们需要获取滚动条的位置，可以使用 JavaScript 来实现。下面将介绍两种常用方法。

方法一：使用 document.documentElement.scrollTop 和 document.body.scrollTop

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);

• document.documentElement.scrollTop 表示文档顶部到视窗顶部的距离。在标准模式下，如果有 doctype 声明，该属性返回值为0。
• document.body.scrollTop 表示文档顶部到滚动条顶部的距离。在兼容模式下，该属性返回的是文档顶部到视窗顶部的距离。

因此，综合考虑两个属性的兼容性，我们可以使用上述代码来获取滚动条的位置。

方法二：使用 window.pageYOffset

var scrollTop = window.pageYOffset;
console.log(scrollTop);

• window.pageYOffset 表示窗口顶部到滚动条顶部的距离。该属性对于所有浏览器均兼容。

因此，使用 window.pageYOffset 也可以方便地获取滚动条的位置。

最后，需要注意的是，在下面的情况下，获取到的滚动条位置会是 0：

• 页面内容不足以产生垂直滚动条；
• 水平滚动条在最左侧，且页面内容不足以产生垂直滚动条；
• 该方法在页面加载时立即调用，此时滚动条的位置未发生变化。

参考链接：MDN 文档 - window.pageYOffset。