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详解与兼容性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。