自接触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。
offsetTop：获取元素相对于离自己最近的设置定位的祖先元素的高度，如果没有，则获取相对于页面的高度。
clientHeight：获取元素的可见高度。element.clientHeight = element.height + element.padding-top + element.padding-bottom。
补充：
1：获取元素的不包括padding和border的宽高度，使用js获取css样式的方法获取。
2：获取元素下面可滚动的高度值： element.scrollHeight - element.clientHeight - element.scrollTop;
希望看到这篇文章的同学，多多指出里面的理解不当的地方。有更好的方法，可以与我分享。
