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

总结

以上是生活随笔为你收集整理的js的client、scroll、offset详解与兼容性的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。