Question

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

Answer 1

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

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

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

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

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

我们发现，在这种特殊情况下，虽然父元素的 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浏览器

clientWidth 、 offsetWidth 、 scrollWidth 属性会进行四舍五入并返回整数。当子元素有多个时相加，误差会越来越大。

我们来看一下 getComputedStyle 的值

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

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

我们发现内容宽度 341.375 与 父元素宽度 341.375 相等。

那我们这里就选用 getBoundingClientRect 吧，但是......

我们把浏览器放大至 150% 再来看一下

我们使用 getBoundingClientRect 的值计算一下

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

因此，我们引入一个微小的忽略值 0.1 ，认为当 父元素的宽度 + 0.1 大于 内容宽度计算结果 时，没有滚动条。

参考文档：
MDN Element.clientWidth
MDN HTMLElement.offsetWidth
MDN Element.scrollWidth
MDN Element.clientHeight
MDN HTMLElement.offsetHeight
MDN Element.scrollHeight