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详解

原文地址:https://www.cnblogs.com/gongshunkai/p/5839636.html