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

全栈程序员-用户IM • 2022年7月23日下午10:16 • 未分类

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

自接触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所占的区域。