js获取滚动高度的方法

在网页开发中，经常需要获取页面的滚动高度，以便实现各种交互效果，比如懒加载、回到顶部按钮的显示与隐藏等。下面将介绍几种常见的JavaScript获取滚动高度的方法。

1. 使用 window.pageYOffset

window.pageYOffset 是一个只读属性，它返回文档在垂直方向上已经滚动的像素值。这个属性在所有主流浏览器中都得到了很好的支持。

示例代码如下：

function getScrollHeight() {
  return window.pageYOffset;
}
console.log(getScrollHeight());

2. 使用 document.documentElement.scrollTop

在一些旧版本的浏览器中，window.pageYOffset 可能不被支持，此时可以使用 document.documentElement.scrollTop 来获取滚动高度。

示例代码如下：

function getScrollHeight() {
  return document.documentElement.scrollTop;
}
console.log(getScrollHeight());

3. 使用 document.body.scrollTop

在某些情况下，特别是在一些不标准的浏览器环境中，document.body.scrollTop 也可以用来获取滚动高度。

示例代码如下：

function getScrollHeight() {
  return document.body.scrollTop;
}
console.log(getScrollHeight());

4. 兼容性处理

为了确保在各种浏览器中都能准确获取滚动高度，可以编写一个兼容性函数：

function getScrollHeight() {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
console.log(getScrollHeight());

通过以上几种方法，我们可以根据实际需求和浏览器兼容性选择合适的方式来获取页面的滚动高度。在实际应用中，我们可以结合这些方法来实现各种有趣的交互效果，提升用户体验。

需要注意的是，在使用这些方法时，要确保在文档加载完成后再进行操作，否则可能会获取到不准确的结果。可以将获取滚动高度的代码放在 window.onload 事件或者 DOMContentLoaded 事件中执行。