(給前端大全加星標，提升前端技能)

作者：前端下午茶?公號 / ?SHERlocked93

在下開發中經常碰到 offset、scroll、client 這幾個關鍵字，比如 offsetLeft、offsetHeight、scrollHeight、clientTop 什么的，每次都要各種實驗，這里總結一下，一勞永逸。

首先兩張圖鎮樓，方便隨時翻閱

1. offset

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

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

   1. 如果當前元素的父級元素中沒有進行CSS定位(position為 absolute/relative)，?offsetParent?為 body

   2. 如果當前元素的父級元素中有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。因為滾動條不會出現在頂部或者左側

推薦閱讀

(點擊標題可跳轉閱讀)

Vue 組件數據通信方案總結

Web 頁面錄屏實現

JavaScript Errors 指南

覺得本文對你有幫助？請分享給更多人

關注「前端大全」加星標，提升前端技能

好文章，我在看??

總結

以上是生活随笔為你收集整理的extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client的全部內容，希望文章能夠幫你解決所遇到的問題。

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