HTML - DOM 元素 scrollTop 屬性

**scrollTop** 屬性允許您訪問和更新元素內容垂直滾動的距離，以畫素為單位測量元素頂邊緣的距離。

語法

設定 scrollLeft 屬性值

element.scrollTop = pixelValue;

獲取 scrollLeft 屬性值

element.scrollTop;

屬性值

值	描述
pixelValue	畫素值，設定元素的垂直滾動位置。如果畫素值為負數，則將其設定為 0。如果元素無法垂直滾動，則值保持為 0。如果畫素值超過最大允許值，則將其設定為最大允許的滾動位置。

返回值

scrollTop 屬性返回一個整數，表示以畫素為單位的垂直滾動位置。

HTML DOM 元素 'scrollTop' 屬性示例

以下是一些示例，展示瞭如何使用 'scrollTop' 屬性調整 HTML DOM 中元素的垂直滾動位置。

顯示即時滾動位置

此示例包含一個具有固定高度和可滾動內容的 **<div>** 元素。在事件監聽器中使用 scrollTop 屬性，它會在您滾動時動態更新元素內的滾動位置。

<!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    #myDIV {
      height: 100px;
      width: 200px;
      overflow: auto;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1> 
  <div id="myDIV">
    <h2>scrollTop Property</h2>
    <p>Scroll Me!!<p>
    <p>To get the scrolled position.</p>
    <p>
      Some content inside the scrollable container.
    </p>
  </div>

  <p>
    Scroll position:<span id="scrollPos"></span>
  </p>

  <script>
    // Get the element
    const m= document.getElementById('myDIV');

    // Update the scroll position on scroll
    m.addEventListener('scroll', function() {
      const sp = m.scrollTop;
      document.getElementById('scrollPos').textContent
      = sp + 'px';
    });
  </script>
</body>

</html>

單擊按鈕垂直滾動容器

此示例包含一個按鈕，單擊該按鈕會將 **<body>** 元素的整個內容滾動到特定位置。它透過每次單擊按鈕時分別在水平和垂直方向上新增 30 畫素和 10 畫素來調整滾動位置。

<!DOCTYPE html>
<html lang="en">
<head>  
  <style>    
      .con {
          height: 300px;  
          width: 80%;  
          overflow: auto;  
          border: 1px solid black;          
      }
      .content {
          height: 800px;  
      }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollTop Property</h2>
  <div class="con">
      <div class="content">
          <p>
            Scroll Me by Clicking the Button!!.
          </p>
          <p>Below!.</p>
          <p>This is some content.</p> 
      </div>
  </div>
  <br>
  <br>
  <button onclick="scrollContainer()">
    Scroll Container
  </button>

  <script>
    function scrollContainer() {
        var con = document.querySelector('.con');
        con.scrollLeft += 30;  
        con.scrollTop += 10; 
    }
  </script>
</body>

</html>

跟蹤和顯示垂直滾動位置

此示例演示瞭如何使用 scrollTop 屬性即時跟蹤和顯示可滾動 <div> 元素的垂直滾動位置。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
        #s-div {
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .content {
            height: 1000px;  
        }
        #scroll-info {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>scrollTop Property</h2>
    <div id="s-div">
        <div class="content"> 
           Scroll me to check whether we 
           reached the bottom or not.!!
        </div>
    </div>
    
    <div id="scroll-info">
        Scroll Top: <span id="st">0</span><br>
        Reached Bottom: <span id="br">No</span>
    </div>
    
    <script>
      var sd = document.getElementById('s-div');
      
      var ste = document.getElementById('st');
      var bre = document.getElementById('br'); 
      sd.addEventListener('scroll', function() {
          // Get the current scrollTop value
          var scrollTopVal = sd.scrollTop;
          // Update the scroll top value display
          ste.textContent = scrollTopVal;
  
          // Check if user reached bottom of scroll
          if (scrollTopVal + sd.clientHeight 
          >= sd.scrollHeight) {
              bre.textContent = 'Yes';
          } else {
              bre.textContent = 'No';
          }
      });
    </script>
</body>

</html>

設定滾動位置

此示例演示了透過設定可滾動元素的可滾動位置來使用 scrollTop 屬性。

<!DOCTYPE html>
<html lang="en">
<head> 
  <style>
      .scr {
          height: 120px;
          width: 200px;
          overflow-y: scroll;
          border: 1px solid #ccc;
      }
  </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <div class="scr" id="scrDiv">
      <h2>scrollTop Property</h2>
      <p>This example allows <br>you to set the
        <br> scroll position to 50 pixel, <br>
        which upon clicking <br>the button will adjust
        the scrollable position to <br>50 pixel.
      </p>
    </div>
    
    <script>
      // Set the scroll position  
      function setScrollPosition() {
          var ele=document.getElementById('scrDiv');
          // Set the scroll position to 50 pixels  
          ele.scrollTop = 50; 
      }
    </script>
    <br>
    <button onclick="setScrollPosition()">
      Set Scroll Position to 50px
    </button>
  
</body>

</html>

滾動時背景顏色更改

此示例使用 scrollTop 屬性。執行此程式碼後嘗試滾動。您將看到滾動超過頁面頂部 100 畫素後背景顏色變為紅色。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
      body {  
        margin: 0; 
        height: 2000px;  
      }
      header {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
      }
      .content {
        margin-top: 100px;
        padding: 20px;
        text-align: center;
        font-size: 18px; 
      }
      .highlight {
        background-color: red;
      }
    </style>
</head>

<body> 
  <header>
    <h1>ScrollTop Event Example</h1>
  </header>

  <div class="content" id="myContent">
    <p>
      Scroll down to see the effect. Once you 
      scroll past 100 pixels from the top, 
      this paragraph will have a yellow background.
    </p>
  </div>

  <script>
    window.onscroll = function() {
      myFunction() 
    };

    function myFunction() {
        var scrollPosition =
        document.documentElement.scrollTop 
        || document.body.scrollTop;

        if (scrollPosition > 100) {
        document.getElementById
        ("myContent").classList.add("highlight");
        } else {
                document.getElementById
                ("myContent").classList.remove
                ("highlight");
        }
    }
  </script>
</body>

</html>

使用 'scrollTop' 屬性建立滾動到頂部指示器

此示例演示瞭如何使用 scrollTop 屬性建立當用戶向下滾動頁面時出現的滾動到頂部指示器。單擊它會將頁面平滑地滾動回頂部。

<!DOCTYPE html>
<html lang="en">
<head> 
  <style>
    body {
      height: 2000px;  
    }
    .scr-ind {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      display: none;
    }
  </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>scrollTop Property </h2>
    <p>Scroll down to see top indicator!</p>
    <div class="scr-ind" id="scrollI">Top</div>

    <script>
      // Display scroll indicator when scrolling down
      window.onscroll = function() {
        var scr=document.getElementById("scrollI");
        if (document.body.scrollTop > 200 ||
        document.documentElement.scrollTop > 200){
         scr.style.display = "block";
        } else {
          scr.style.display = "none";
        }
      };
    
      // Scroll to top when indicator is clicked
      document.getElementById("scrollI").addEventListener
      ("click", function() { 
          // For Chrome, Firefox, IE and Opera
          document.documentElement.scrollTop = 0; 
      });
    </script>
</body>

</html>

支援的瀏覽器

屬性
scrollTop	是	是	是	是	是

html_dom_element_reference.htm

列印頁面