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