js获取滚轮的高度

在JavaScript中，获取滚轮（即页面滚动条）的高度通常指的是获取页面的滚动高度，也就是用户滚动页面时可见区域上方的内容高度。以下是一些基础概念和相关方法：

基础概念

Scroll Height: 元素的滚动高度，包括溢出部分。
Client Height: 元素的可视区域高度，不包括滚动条。
Scroll Top: 元素顶部被卷起的高度。

获取滚动高度的方法

你可以使用以下几种方法来获取页面的滚动高度：

1. `window.pageYOffset`

这是最简单的方法之一，用于获取页面垂直滚动的像素值。

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

2. `document.documentElement.scrollTop`

这个属性返回文档在垂直方向已滚动的像素值。

const scrollTop = document.documentElement.scrollTop;
console.log(scrollTop);

3. `document.body.scrollTop`（兼容性考虑）

在一些旧版本的浏览器中，可能需要使用这个属性。

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

获取整个文档的滚动高度

如果你想获取整个文档的高度，可以使用以下方法：

const documentHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
console.log(documentHeight);

应用场景

无限滚动: 当用户滚动到页面底部时自动加载更多内容。
回到顶部按钮: 显示一个按钮，当用户滚动一定距离后显示，点击可以快速回到顶部。
滚动监听: 监听滚动事件，执行某些动画或数据加载操作。

注意事项

在处理滚动事件时，应注意性能问题，可以使用节流（throttling）或防抖（debouncing）技术来优化。
不同浏览器可能会有不同的实现方式，需要注意兼容性问题。

示例代码：实现回到顶部按钮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回到顶部示例</title>
<style>
  #backToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
  }
  #backToTop:hover {
    background-color: #777;
  }
</style>
</head>
<body>

<button onclick="topFunction()" id="backToTop" title="Go to top">Top</button>

<script>
// 获取按钮
let mybutton = document.getElementById("backToTop");

// 当用户滚动页面时，执行函数
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  // 如果用户向下滚动超过20px，显示按钮
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// 当用户点击按钮，回到顶部
function topFunction() {
  document.body.scrollTop = 0; // 对于Safari
  document.documentElement.scrollTop = 0; // 对于Chrome, Firefox, IE 和 Opera
}
</script>

</body>
</html>

这个示例展示了如何检测滚动位置并在适当的时候显示一个“回到顶部”的按钮。