使用 JavaScript 获取滚动条位置

Tahseen Tauseef 2023年1月30日 2022年5月11日
  1. 什么是滚动条和滚动条位置
  2. 使用 JavaScript 中的 window 对象获取滚动条位置
  3. 在 JavaScript 中获取元素内的滚动条位置
使用 JavaScript 获取滚动条位置

在本教程中,我们将讨论如何在 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 对象。scrollYwindow 的一个属性,它告诉我们窗口查看区域从顶部滚动的像素数。scrollXwindow 对象的一个​​属性,它告诉我们用户从左边滚动了多少。

在 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>

在上面的代码段中,具有 ContentContainerid 的元素具有 onscroll 属性;每当用户在元素内滚动时,就会执行 getScrollPosition 函数。

getScrollPosition 所做的是获取内容元素的容器,并获取它从左侧滚动的位置,然后获取从顶部滚动的位置。

相关文章 - JavaScript DOM