js的client、scroll、offset详解与兼容性
clientWidth:可視區(qū)寬
說明:樣式寬+padding
參考:js的client詳解
scrollTop : 滾動條滾動距離
說明:chrome下他會以為滾動條是文檔元素的,所以需要做兼容:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
參考:js的scroll詳解
scrollHeight :?返回整個元素的高度+padding(包括子元素把父元素?fù)伍_隱蔽的地方)
參考:js的scroll詳解
offsetHeight : 文檔高度
說明:任何一個元素的高度+padding+border
?ie下會把整個文檔可視區(qū)作為高度,建議使用document.body.offsetHeight
?
offsetLeft: 返回當(dāng)前元素的相對水平偏移位置的偏移容器
說明:找距離定位父級(position:relative)左邊的距離,如果沒有定位默認(rèn)是body
參考:offsetLeft與offsetTop詳解
?
offsetParent : 返回元素的偏移容器
說明:?找有定位的父節(jié)點,沒有定位默認(rèn)是body,ie7以下定位在當(dāng)前元素是html
參考:offsetParent詳解
轉(zhuǎn)載于:https://www.cnblogs.com/gongshunkai/p/5839636.html
總結(jié)
以上是生活随笔為你收集整理的js的client、scroll、offset详解与兼容性的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端干货之JS最佳实践
- 下一篇: 微信iOS多设备多字体适配方案总结