js查看是否有滚动条(js 监听滚动条)
通过JS 判断页面是否有滚动条的简单方法
判断是否有滚动条的方法
function?hasScrollbar()?{????
????return?document.body.scrollHeight??(window.innerHeight?||?document.documentElement.clientHeight);
}
一般情况下，使用?document.body.scrollHeight window.innerHeight?就可以判断。
但是在 IE7，IE8 中?window.innerHeight?为?underfined，所以为了兼容 IE7、IE8，需要使用?document.documentElement.clientHeight?属性计算窗口高度。
如何判断有没有出现滚动条
我们要判断一个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
js判断是页面中是否有滚动条
function hasScrollbar() {
return document.body.scrollHeight (window.innerHeight || document.documentElement.clientHeight);
}
调用该方法便可以 原理很简单 就是看内容的高度是否比浏览器更高