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

打印页面