使用 JavaScript 获取滚动条位置

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 获取滚动条位置

作者：迹忆客最近更新：2023/03/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>