scrollTop详测

小菜101

已于 2022-04-21 10:58:00 修改

阅读量704

点赞数 1

分类专栏： js 文章标签：前端 scrollHeight javascript js

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

本文链接：https://blog.csdn.net/github_36091081/article/details/124315993

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

小菜101

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scrollTop详测

1. 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。2. 设置scrollTop的值小于0，scrollTop 被设为03. 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi
复制链接

扫一扫

专栏目录