[JavaScript知识库] Element属性：获取，设置元素滚动距离，scrollHeightscrollTop scrollLeft属性详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Element属性：获取，设置元素滚动距离，scrollHeightscrollTop scrollLeft属性详解 -> 正文阅读

[JavaScript知识库]Element属性：获取，设置元素滚动距离，scrollHeightscrollTop scrollLeft属性详解

Element.scrollHeight - Web API 接口参考 | MDN

Element.scrollHeight?这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

计算公式：scrollHeight =?内容高（包括溢出的）?+ paddingTop + paddingBottom

（1）没有垂直滚动条的情况下，scrollHeight和clientHeight相等：

?<style>
    * {
        margin: 0;
    }
    #father {
        box-sizing: border-box;
        width: 150px;
        height: 150px;
        padding: 20px;
        border: 10px solid green;
        background: red;
        overflow: auto;
    }
    #son {
        width: 50px;
        height: 50px;
        background: blue; 
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
    <div id="father">
        <div id="son">son</div>
    </div>
</body>
<script>
  var father = document.getElementById("father");
  // 没有垂直滚动条时，scrollHeight和clientHeight相等
  console.log(father.clientHeight) // 150-10*2 = 130;
  console.log(father.scrollHeight) // 150-10*2 = 130;
  console.log(father.offsetHeight) // 150
</script>

（2）有垂直滚动条的情况下：

?<style>
    * {
        margin: 0;
    }
    #father {
        box-sizing: border-box;
        width: 150px;
        height: 150px;
        padding: 20px;
        border: 10px solid green;
        background: red;
        overflow: auto;
    }
    #son {
        width: 50px;
        height: 200px;
        background: blue; 
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
    <div id="father">
        <div id="son">son</div>
    </div>
</body>
<script>
  var father = document.getElementById("father");
  // scrollHeight =?内容高 + paddingTop + paddingBottom
  console.log(father.scrollHeight) // 200+20*2 = 240
  console.log(father.clientHeight) // 150-10*2 = 130
  console.log(father.offsetHeight) // 150
</script>

Element.scrollTop - Web APIs | MDN

Element.scrollTop?属性可以获取或设置一个元素的内容垂直滚动的像素数。

scrollTop 可以被设置为任何整数值，同时注意：

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

《scrollLeft同理》

应用示例：

JS在线编辑器,JS在线运行,在线演示,调试测试代码

<style>
    * {
        margin: 0;
    }
    #father {
        width: 150px;
        height: 150px;
        background: red;
        overflow: auto;
    }
    #son {
        width: 50px;
        height: 200px;
        background: blue; 
        line-height: 200px;
        text-align: center;
    }
</style>
<body>
    <div id="father">
        <div id="son">son</div>
    </div>
</body>
<script>
  var father = document.getElementById("father");
  father.scrollTop = 150; // 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
  console.log(father.scrollTop) // 50
</script>