使用 JavaScript 获取滚动条位置
Tahseen Tauseef
2023年1月30日
2022年5月11日
在本教程中,我们将讨论如何在 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
所做的是获取内容元素的容器,并获取它从左侧滚动的位置,然后获取从顶部滚动的位置。