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