scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解

开发中经常遇到使用scrollHeight、scrollTop、clientHeight、offsetHeight等的情况，网上有众多关于这些属性的解释，但是并不全面和直观，现在将这些属性结合图例整理如下，方便日后查阅：

DOM元素对象

clientHeight	返回当前元素在页面上的可视高度（包括padding；不包括border、margin、滚动条高度）	单位px
clientWidth	返回当前元素在页面上的可视宽度（包括padding；不包括border、margin、滚动条宽度）	单位px
offsetHeight	返回当前元素在页面上的可视高度（包括padding、border、滚动条高度；不包括margin）	单位px
offsetWidth	返回当前元素在页面上的可视宽度（包括padding、border、滚动条宽度；不包括margin）	单位px
scrollHeight	返回当前整个元素的高度（包括带滚动条的隐蔽的地方）	单位px
scrollWidth	返回当前整个元素的宽度（包括带滚动条的隐蔽的地方）	单位px
scrollTop	clientHeight的顶部到scrollHeight顶部的高度	单位px
scrollLeft	clientWidth左边缘到offsetWidth左边缘的距离	单位px
offsetTop	指当前元素距离上方或上层元素的距离	单位px
offsetLeft	指当前元素距离左边或上层元素左边的距离	单位px

参考资料

http://www.runoob.com/jsref/dom-obj-all.html

https://www.jianshu.com/p/d267456ebc0d