📅 最后修改于: 2023-12-03 15:23:53.503000 🧑 作者: Mango
在编写网页时，我们常常需要获取当前页面的滚动条高度。例如，在实现“滚动到顶部”或“滚动到底部”等功能时，就需要知道当前滚动条的高度。
在 JavaScript 中，我们可以通过以下代码获取滚动条的高度：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
上述代码会先尝试获取 document.documentElement.scrollTop 的值，若该值不存在则尝试获取 document.body.scrollTop 的值。两个值中至少有一个可用，一般情况下取前者。这是因为在某些浏览器中（如火狐浏览器），滚动条的高度是由 document.documentElement.scrollTop 决定的。
需要注意的是，该代码只能获取当前滚动条的高度，若页面发生滚动后需要再次获取高度，则需要重新执行该代码。
以下是一个完整的示例，演示如何在页面滚动时获取滚动条高度，并在到达一定高度时显示一个“回到顶部”按钮：
<!DOCTYPE html>
<html>
<head>
<title>获取滚动条高度示例</title>
<style type="text/css">
#back-to-top {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #222;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="back-to-top">回到顶部</div>
<script type="text/javascript">
window.onscroll = function() {
// 获取滚动条高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判断是否已经滚动到一定高度
if (scrollTop > 200) {
document.getElementById('back-to-top').style.display = 'block';
} else {
document.getElementById('back-to-top').style.display = 'none';
}
}
document.getElementById('back-to-top').onclick = function() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
</script>
</body>
</html>
在上述示例中，我们绑定了 window.onscroll 事件，在滚动时获取滚动条高度，并根据高度判断是否需要显示“回到顶部”按钮。点击按钮后，就会将滚动条高度设置为 0，以实现滚动到页面顶部的效果。
以上就是使用 JavaScript 获取滚动条高度的方法。