自接触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);
第七行代码设置了scrollTop，第八行输出了scrollTop，输出值为： element‘s scrollTop = 300。蓝色部分为test里层的div所占的区域。
scrollHeight：获取元素的滚动高度。当元素内容高度超出元素高度时，scrollHeight=内容高度+自身高度。
offsetHeight：获取元素的实际高度。element.offsetHeight = element.clientHeight + border-top + border-bottom。
clientHeight：获取元素的可见高度。element.clientHeight = element.height + element.padding-top + element.padding-bottom。
补充：
1：获取元素的不包括padding和border的宽高度，使用js获取css样式的方法获取。
2：获取元素下面可滚动的高度值： element.scrollHeight - element.clientHeight - element.scrollTop;
希望看到这篇文章的同学，多多指出里面的理解不当的地方。有更好的方法，可以与我分享。
时间： 2024-08-28 21:01:48