API

API	说明
clientWidth	内联元素以及没有 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或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
offsetHeight	HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
scrollHeight	`Element.scrollHeight` 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。 `scrollHeight`的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值`clientHeight`相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 `::before` 和 `::after`这样的伪元素。

此属性会将获取的值四舍五入取整数。如果你需要小数结果, 请使用 element.getBoundingClientRect().

image.png

水平方向滚动条

我们要判断一个div上有没有出现水平方向滚动条，只需判断scrollWidth是否大于clientWidth即可。

当border为0时，使用offsetHeight - clientHeight可以得到水平滚动条的宽度（如果有的话）。

垂直方向滚动条

我们要判断一个div上有没有出现垂直方向滚动条，只需判断scrollHeight是否大于clientHeight即可。

当border为0时，使用offsetWidth - clientWidth可以得到垂直滚动条的宽度（如果有的话）。

但是在IE浏览器上，某些特殊情况下，虽然scrollHeight > clientHeight（或scrollWidth > clientWidth），也不一定出现滚动条。

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

我们发现，在这种特殊情况下，虽然父元素的 scrollHeight（258）> clientHeight（257），并且实际内容的高度是257.92999267578125，的确父元素应该出现滚动条，但实际在IE浏览器上没有显示滚动条，这一点我们从数据父元素的 offsetWidth（840）- clientWidth（840）= 0 也可得出。

通常情况下，我们可以使用scrollWidth > clientWidth 判断是否出现水平滚动条， scrollHeight > clientHeight 判断是否出现垂直滚动条。

在需要更精确（非移动端且非overflow: hidden 或 overlay）或要拿到滚动条宽度的情况下，我们可以使用 offsetHeight - clientHeight（水平滚动条）或 offsetWidth - clientWidth（垂直滚动条），这时，我们不要忘了减去元素的border。

更复杂情况下的判断

有时候情况比较复杂，比如滚动区域宽度是不固定的，我们需要根据是否出现滚动条来设置滚动区域宽度（比如，出现滚动条时给左右加上点击按钮，来切换显示区域）。这时我们就需要来计算内部各元素宽度之和来判断是否出现滚动条。
这里写了个例子，我们来看一下，运行环境为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属性会进行四舍五入并返回整数。当子元素有多个时相加，误差会越来越大。

getComputedStyle

我们来看一下getComputedStyle的值

98.4063（子元素1宽度）+ 2（子元素1 margin-right）+ 240.969（子元素2宽度）= 341.3753

我们发现内容宽度341.3753 > 父元素宽度341.375
getComputedStyle存在一个小的精度误差。

getBoundingClientRect

我们再来看一下getBoundingClientRect获取到的宽度

98.40625（子元素1宽度）+ 2（子元素1 margin-right）+ 240.96875（子元素2宽度）= 341.375

我们发现内容宽度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

我们发现得到的值为341.3541793823242，与获取到的父元素的值341.35418701171875仍存在一个微小的偏差（这个偏差可能是大，也可能是小）。

因此，我们引入一个微小的忽略值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

如何判断有没有出现滚动条