使用 JavaScript 获取滚动条位置
Tahseen Tauseef
2023年10月12日
在本教程中，我们将讨论如何在 JavaScript 中获取滚动条位置，我们将讨论：
- 什么是滚动条和滚动条位置
- 如何使用
window对象获取滚动条位置 - 如何获取元素内的滚动条位置
什么是滚动条和滚动条位置
矩形条通常位于用户可以滚动的浏览器窗口的最底端或最右端，从而定位用户的查看区域。许多用户每天都使用滚动条，因为他们几乎需要在每个网页上上下滚动才能查看更多内容。
滚动条是窗口查看区域的水平或垂直位置，表示用户从左侧或顶部滚动了多少。默认情况下，滚动位置是从左边 0px 和从顶部 0px。
使用 JavaScript 中的 window 对象获取滚动条位置
我们可以使用 window 对象获取窗口上的滚动条位置。由于 window 对象就像任何其他 JavaScript 对象，我们可以添加一个 EventListener 来监听 scroll 事件。
window.addEventListener('scroll', (event) => {
let scrollY = this.scrollY;
let scrollX = this.scrollX;
console.log(scrollY);
console.log(scrollX);
});
this 在这个上下文中被称为 window 对象。scrollY 是 window 的一个属性，它告诉我们窗口查看区域从顶部滚动的像素数。scrollX 是 window 对象的一个属性，它告诉我们用户从左边滚动了多少。
在 JavaScript 中获取元素内的滚动条位置
在某些情况下，你需要获取的不是整个窗口的滚动位置，而是相对于某个元素的滚动位置。让我们看一个这样做的例子。
<!DOCTYPE html>
<html>
<head>
<style>
#ContentContainer {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 500px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div id="ContentContainer" onscroll="getScrollPoistion()">
<div id="content">Content to Scroll</div>
</div>
<script>
function getScrollPoistion() {
var ContainerElement = document.getElementById("ContentContainer");
var x = ContainerElement.scrollLeft;
var y = ContainerElement.scrollTop;
console.log(x); // scroll position from Left
console.log(y); // scroll position from top
}
</script>
</body>
</html>
在上面的代码段中，具有 ContentContainer 的 id 的元素具有 onscroll 属性；每当用户在元素内滚动时，就会执行 getScrollPosition 函数。
getScrollPosition 所做的是获取内容元素的容器，并获取它从左侧滚动的位置，然后获取从顶部滚动的位置。