clientWidth、clientHeight获取元素的可见宽度和高度，不带px，返回的是一个数字，可以直接进行计算。（包括内容区和内边距padding只读不可修改）
offsetWidth、offsetHeight获取元素的整个宽度和高度包括内容区，内边距和边框。
offsetParent可以用来获取当前元素的定位父元素，最近的开启了定位的元素，如果所有的父元素都没开启，则返回body。
offsetLeft、offsetTop获取当前元素相对于其定位父元素的水平,垂直偏移量。
scrollHeight获取元素整个滚动区域的高度，scrollLeft获取水平滚动条滚动的距离。
对于以上附上代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">点我获取</button>
<div id="div1"></div>
</body>
<script>
var div1=document.getElementById("div1");
var btn=document.getElementById("btn");
btn.onclick=function(){
var clientwidth=div1.clientWidth;
var clientheight=div1.clientHeight;
var offsetwidth=div1.offsetWidth;
var offsetparent=div1.offsetParent;
var offsetleft=div1.offsetLeft;
var scrollheight=div1.scrollHeight;
var scrollleft=div1.scrollLeft;
alert("clientwidth="+clientwidth+"," +
"clientheight="+clientheight+
",offsetwidth="+offsetwidth+
",offsetparent="+offsetparent+
",offsetleft="+ offsetleft+
",scrollheight="+scrollheight+
",scrollleft="+scrollleft);
}
</script>
</html>结果为：
clientwidth=100,clientheight=100,offsetwidth=100,offsetparent=[object HTMLBodyElement],offsetleft=8,scrollheight=100,scrollleft=0
注意：当满足scrollHeight-scrollTop==clientHeight说明垂直滚动条滚动到底了，水平的也一样，可以自己写代码测试一下。谷歌下document.body.scrollwidth不是为空，而是出现异常值，解决兼容问题把document.documentElement.scrollTop放前面：
function getPos(ev){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}学习资源：https://www.cnblogs.com/SharkChilli/p/6915211.html
scrollTop的兼容性及防抖函数：https://www.cnblogs.com/fogwind/p/6363269.html