scrollTop详测

原创已于 2022-04-21 10:58:00 修改 · 792 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #scrollHeight #javascript #js

于 2022-04-21 10:47:08 首次发布

js 专栏收录该内容

15 篇文章

订阅专栏

这篇博客探讨了HTML元素的scrollTop属性，详细说明了当元素无法滚动、设置负值以及超过容器滚动范围时的处理方式。通过示例代码展示了如何设置和获取scrollTop，并解释了其在可滚动容器中的最大值计算逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
2. 设置scrollTop的值小于0，scrollTop 被设为0
3. 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scrollHeight详测</title>
  <style>
    #box{
      width:500px;
      height: 200px;
      overflow: auto;
      border: 1px solid #ccc;
    }
    #box .inner {
      height: 300px;
      background-color: pink;
    }
  
   
  </style>
</head>
<body>
  <!-- 框200px，内容区 300px -->
  <div id="box">
    <div class="inner">300px</div>
  </div>
   <script>

    /*
    1. 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
    2. 设置scrollTop的值小于0，scrollTop 被设为0
    3. 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
    */

     var  el = document.getElementById("aa");
     var box = document.getElementById("box");

     // 1. 
     // 如果没有滚动条，scrollHeight就是框的高度，（不包括border边框的高度）  这里是200
     // 如果出现滚动条，就是内容总高度，这里就是 50*6 = 300
     console.log(box.scrollHeight); 


    // 2.设置scrollTop的值小于0，scrollTop 被设为0
    box.scrollTop = -1;
    console.log("scrollTop设置负值后 = ",box.scrollTop); // 0

    // 3 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
    box.scrollTop = 300;  // 容器总高是300，可滚动值当然会小于300，这里设置了最大的300
    console.log("scrollTop设置超出这个容器可滚动的值后 = ",box.scrollTop); // 100  
    // 即内容的高度 300 - box框的高度 200  = 100（最大可滚动的值）

    
   </script>
</body>
</html>