js的client、scroll、offset详解与兼容性

clientWidth：可视区宽
说明：样式宽+padding
参考：js的client详解

scrollTop : 滚动条滚动距离
说明：chrome下他会以为滚动条是文档元素的，所以需要做兼容：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
参考：js的scroll详解

scrollHeight : 返回整个元素的高度+padding（包括子元素把父元素撑开隐蔽的地方）
参考：js的scroll详解

offsetHeight : 文档高度
说明：任何一个元素的高度+padding+border
 ie下会把整个文档可视区作为高度，建议使用document.body.offsetHeight

 

offsetLeft: 返回当前元素的相对水平偏移位置的偏移容器
说明：找距离定位父级（position:relative）左边的距离，如果没有定位默认是body
参考：offsetLeft与offsetTop详解

 

offsetParent : 返回元素的偏移容器
说明： 找有定位的父节点，没有定位默认是body，ie7以下定位在当前元素是html
参考：offsetParent详解