大家好，又见面了，我是你们的朋友全栈君。
自接触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等的比较[通俗易懂]](https://images0.cnblogs.com/blog/474528/201412/251136222802833.png)
![scrollHeight、scrollTop等的比较[通俗易懂]](https://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)
第七行代码设置了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
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/163762.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...