使用 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