scrollHeight、scrollTop等的比较[通俗易懂]

全栈程序员-站长 • 2022年7月23日下午10:16 • 未分类 • 阅读 10

大家好，又见面了，我是你们的朋友全栈君。

自接触js以来一直使用的是jquery插件，对js的了解甚少，经常容易混淆element.scrollHeight、element.scrollTop等方法。今天对这些方法做出比较。

scrollTop：可以设置或者获取元素的已滚动的上部不可见区域的高度。

<!DOCTYPE html>
<html>
<head>
    <title>测试scrollHeight等的区别</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        body{
    
    
            padding: 0px;
            margin: 0px;
        }
        #test{
    
    
            width: 200px;
            height: 200px;
            border: 1px solid #cccccc;
            overflow-y: auto;
            margin: 300px auto;
        }
        #test p{
    
    
            height: 20px;
            margin: 0px;

        }
    </style>
</head>
<body>
    <div id="test"><div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div>
</body>
</html>

上面，有一个id为test的div，里面嵌套一个div和多个p标签。

var element = document.getElementById("test");
    var p = element.getElementsByTagName("p");
    var pL = p.length;
    for(var i=1; i<=pL; i++){
        p[i-1].className = "p" + i;
    }
    element.scrollTop = 300;
    console.log("element's scrollTop = " + element.scrollTop);

scrollHeight、scrollTop等的比较[通俗易懂] 第七行代码设置了scrollTop，第八行输出了scrollTop，输出值为： element’s scrollTop = 300。蓝色部分为test里层的div所占的区域。

scrollHeight：获取元素的滚动高度。当元素内容高度超出元素高度时，scrollHeight=内容高度+自身高度。

offsetHeight：获取元素的实际高度。element.offsetHeight = element.clientHeight + border-top + border-bottom。

offsetTop：获取元素相对于离自己最近的设置定位的祖先元素的高度，如果没有，则获取相对于页面的高度。

clientHeight：获取元素的可见高度。element.clientHeight = element.height + element.padding-top + element.padding-bottom。

补充：

1：获取元素的不包括padding和border的宽高度，使用js获取css样式的方法获取。

2：获取元素下面可滚动的高度值： element.scrollHeight – element.clientHeight – element.scrollTop;

希望看到这篇文章的同学，多多指出里面的理解不当的地方。有更好的方法，可以与我分享。

转载于:https://www.cnblogs.com/yanyalun/p/4184343.html

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/163762.html原文链接：https://javaforall.net

scrollHeight、scrollTop等的比较[通俗易懂]

关于作者

全栈程序员-站长

发表回复

scrollHeight、scrollTop等的比较[通俗易懂]

关于作者

全栈程序员-站长

相关推荐

Windows XP虚拟机到期无法使用的解决方案（救急版）[通俗易懂]

世界坐标系,相机坐标系和图像坐标系的转换(Python)

python endswith函数_Python的startswith和endswith

亲测可用 在Cherry Studio设置火山引擎-豆包Doubao大模型

Docker镜像自动执行脚本.sh

python数组操作方法_数组 python

发表回复

亲测可用在Cherry Studio设置火山引擎-豆包Doubao大模型