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

时间:2023-03-08 22:04:17

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