JS 中的offset、scroll、client總結

常常碰到offset、scroll、client這幾個關鍵字，每次都要各類實驗，這裏總結一下。

兩張圖鎮樓，隨時翻閱

1. offset

offset 指偏移，包括這個元素在文檔中佔用的全部顯示寬度，包括滾動條、padding、border，不包括overflow隱藏的部分

1. offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的父級元素中最近的（在包含層次中最靠近的），而且是已進行過CSS定位的容器元素。 若是這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲根元素的引用。

   • 若是當前元素的父級元素中沒有進行CSS定位（position爲absolute/relative），offsetParent爲body
   • 若是當前元素的父級元素中有CSS定位（position爲absolute/relative），offsetParent取父級中最近的元素
2. obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的寬度，整型，單位：像素。
   offsetWidth = border-width*2+padding-left+width+padding-right
3. obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的高度，整型，單位：像素。
   offsetHeight = border-width*2+padding-top+height+padding-bottom
4. obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置，整型，單位：像素。
   offsetTop= offsetParent的padding-top + 中間元素的offsetHeight + 當前元素的margin-top
5. obj.offsetLeft 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置，整型，單位：像素。
   offsetLeft= offsetParent的padding-left + 中間元素的offsetWidth + 當前元素的margin-left

2. scroll

scroll指滾動，包括這個元素沒顯示出來的實際寬度，包括padding，不包括滾動條、border

1. scrollHeight 獲取對象的滾動高度，對象的實際高度；
2. scrollLeft 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
3. scrollTop 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
4. scrollWidth 獲取對象的滾動寬度

3. client

client指元素自己的可視內容，不包括overflow被摺疊起來的部分，不包括滾動條、border，包括padding

1. clientWidth 對象可見的寬度，不包括滾動條等邊線，會隨窗口的顯示大小改變
2. clientHeight 對象可見的高度
3. clientTop、clientLeft 這兩個返回的是元素周圍邊框的厚度，通常它的值就是0。由於滾動條不會出如今頂部或者左側

---

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：

1. javascript的offset、client、scroll的總結筆記
2. 輕鬆弄清JavaScript中的offset、scroll、client
3. offset client scroll screen 關鍵字整理

PS：歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～