API
| API | 說明 |
|---|---|
| clientWidth? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? | 內聯(lián)元素以及沒有 CSS 樣式的元素的 clientWidth 屬性值為 0。 Element.clientWidth 屬性表示元素的內部寬度，以像素計。 該屬性包括內邊距 padding，但不包括邊框 border、外邊距 margin 和垂直滾動條（如果有的話）。 |
| offsetWidth | HTMLElement.offsetWidth 是一個只讀屬性，返回一個元素的布局寬度。 一個典型的（譯者注：各瀏覽器的offsetWidth可能有所不同）offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（如果存在的話）、以及CSS設置的寬度(width)的值。 |
| scrollWidth |
Element.scrollWidth 這個只讀屬性是元素內容寬度的一種度量，包括由于overflow溢出而在屏幕上不可見的內容。scrollWidth值等于元素在不使用水平滾動條的情況下適合視口中的所有內容所需的最小寬度。寬度的測量方式與 clientWidth相同：它包含元素的內邊距，但不包括邊框，外邊距或垂直滾動條（如果存在）。 它還可以包括偽元素的寬度，例如::before或::after。 如果元素的內容可以適合而不需要水平滾動條，則其scrollWidth等于clientWidth
|
| clientHeight | 這個屬性是只讀屬性，對于沒有定義CSS或者內聯(lián)布局盒子的元素為0，否則，它是元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。 |
| offsetHeight | HTMLElement.offsetHeight 是一個只讀屬性，它返回該元素的像素高度，高度包含該元素的垂直內邊距和邊框，且是一個整數(shù)。 通常，元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條（如果存在且渲染的話），不包含:before或:after等偽類元素的高度。 |
| scrollHeight |
Element.scrollHeight 這個只讀屬性是一個元素內容高度的度量，包括由于溢出導致的視圖中不可見內容。scrollHeight的值等于該元素在不使用滾動條的情況下為了適應視口中所用內容所需的最小高度。 沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after這樣的偽元素。 |
此屬性會將獲取的值四舍五入取整數(shù)。 如果你需要小數(shù)結果, 請使用
element.getBoundingClientRect().
水平方向滾動條
我們要判斷一個div上有沒有出現(xiàn)水平方向滾動條，只需判斷scrollWidth是否大于clientWidth即可。
當border為0時，使用offsetHeight - clientHeight可以得到水平滾動條的寬度（如果有的話）。
垂直方向滾動條
我們要判斷一個div上有沒有出現(xiàn)垂直方向滾動條，只需判斷scrollHeight是否大于clientHeight即可。
當border為0時，使用offsetWidth - clientWidth可以得到垂直滾動條的寬度（如果有的話）。
但是在IE瀏覽器上，某些特殊情況下，雖然scrollHeight > clientHeight（或scrollWidth > clientWidth），也不一定出現(xiàn)滾動條。
| API | 父元素 | 子元素 |
|---|---|---|
| Element.clientHeight | 257 | 258 |
| Element.offsetHeight | 257 | 258 |
| Element.scrollHeight | 258 | 258 |
| Element.getBoundingClientRect().height | 257 | 257.92999267578125 |
| Element.clientWidth | 840 | 840 |
| Element.offsetWidth | 840 | 840 |
我們發(fā)現(xiàn)，在這種特殊情況下，雖然父元素的 scrollHeight（258）> clientHeight（257），并且實際內容的高度是257.92999267578125，的確父元素應該出現(xiàn)滾動條，但實際在IE瀏覽器上沒有顯示滾動條，這一點我們從數(shù)據(jù) 父元素的 offsetWidth（840）- clientWidth（840）= 0 也可得出。
通常情況下，我們可以使用scrollWidth > clientWidth 判斷是否出現(xiàn)水平滾動條， scrollHeight > clientHeight 判斷是否出現(xiàn)垂直滾動條。
在需要更精確（非移動端且非overflow: hidden 或 overlay）或要拿到滾動條寬度的情況下，我們可以使用 offsetHeight - clientHeight（水平滾動條） 或 offsetWidth - clientWidth（垂直滾動條），這時，我們不要忘了減去元素的border。
更復雜情況下的判斷
有時候情況比較復雜，比如滾動區(qū)域寬度是不固定的，我們需要根據(jù)是否出現(xiàn)滾動條來設置滾動區(qū)域寬度（比如，出現(xiàn)滾動條時給左右加上點擊按鈕，來切換顯示區(qū)域）。這時我們就需要來計算內部各元素寬度之和來判斷是否出現(xiàn)滾動條。
這里寫了個例子，我們來看一下，運行環(huán)境為Windows電腦，Chrome瀏覽器
| API | 父元素 | 子元素1 | 子元素2 |
|---|---|---|---|
| Element.getBoundingClientRect().width | 341.375 | 98.40625 | 240.96875 |
| getComputedStyle(Element).width | 341.375px | 98.4063px | 240.969px |
| Element.clientWidth | 341 | 98 | 241 |
| Element.offsetWidth | 341 | 98 | 241 |
| Element.scrollWidth | 341 | 98 | 241 |
| getComputedStyle(Element).marginRight | 0px | 2px | 0px |
這里子元素1上有一個marginRight的值：
2px
clientWidth、offsetWidth、scrollWidth屬性會進行四舍五入并返回整數(shù)。當子元素有多個時相加，誤差會越來越大。
getComputedStyle
我們來看一下getComputedStyle的值
98.4063（子元素1寬度）+ 2（子元素1 margin-right）+ 240.969（子元素2寬度）= 341.3753
我們發(fā)現(xiàn)內容寬度341.3753 > 父元素寬度341.375
getComputedStyle存在一個小的精度誤差。
getBoundingClientRect
我們再來看一下getBoundingClientRect獲取到的寬度
98.40625（子元素1寬度）+ 2（子元素1 margin-right）+ 240.96875（子元素2寬度）= 341.375
我們發(fā)現(xiàn)內容寬度341.375 與 父元素寬度341.375 相等。
那我們這里就選用getBoundingClientRect吧，但是......
瀏覽器放大或縮小
我們把瀏覽器放大至150%再來看一下
| API | 父元素 | 子元素1 | 子元素2 |
|---|---|---|---|
| Element.getBoundingClientRect().width | 341.35418701171875 | 98.39583587646484 | 240.95834350585938 |
| getComputedStyle(Element).width | 341.354px | 98.3958px | 240.958px |
| Element.clientWidth | 341 | 99 | 241 |
| Element.offsetWidth | 341 | 99 | 241 |
| Element.scrollWidth | 341 | 99 | 241 |
| getComputedStyle(Element).marginRight | 0px | 2px | 0px |
我們使用getBoundingClientRect的值計算一下
98.39583587646484（子元素1寬度）+ 2（子元素1 margin-right）+ 240.95834350585938（子元素2寬度）= 341.3541793823242
我們發(fā)現(xiàn)得到的值為341.3541793823242，與獲取到的父元素的值341.35418701171875仍存在一個微小的偏差（這個偏差可能是大，也可能是?。?/p>
因此，我們引入一個微小的忽略值0.1，認為當 父元素的寬度 + 0.1 大于 內容寬度計算結果 時，沒有滾動條。
341.35418701171875 + 0.1 > 341.3541793823242
參考文檔：
MDN Element.clientWidth
MDN HTMLElement.offsetWidth
MDN Element.scrollWidth
MDN Element.clientHeight
MDN HTMLElement.offsetHeight
MDN Element.scrollHeight
