offset client scroll

offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距

clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度。
<div style="100px;height:100px;overflow:auto"></div>如果此元素的内容过长,就会出现滚动条。 
 
scrollHeight scrollWidth 返回内容显示高度+内边距+溢出内容高度。而offsetHeight返回值为就是块元素的宽高(不包括外边距);
在没有溢出内容的时候scrollHieght和clientHeight相同;
 
offsetTop offsetLeft对于没有进行定位的元素来说,返回其文档坐标。对于定位元素来说,返回其相对父元素左上角的坐标。offsetParent来引用父元素
对于上面实例代码中的element来说,不管其父元素怎么滚动条,offsetTop返回的都是滚动条为0的时候,element的文档坐标。如果想要得到视觉上的文档坐标,需要减去element父元素的滚动条偏移量
 
clientTop clientLeft 基本没什么作用,返回内边距到外边距的距离,相当于边框高度。如果滚动条出现在左侧或者上侧,则也包括滚动条的宽高。
scrollTop scrollLeft 返回元素滚动条的偏移量(可进行滚动条设置)
 
原文地址:https://www.cnblogs.com/wofeiwofei/p/4979823.html