如何判断页面出现滚动条

Question

function isScrollY() {
    return document.documentElement.offsetHeight > document.documentElement.clientHeight;
}

这是判断页面出现纵向滚动条的方法。

问题1

document.body.clientHeight和document.documentElement.clientHeight有什么区别？

但是用在width上有问题，两个完全一样

function isScrollX() {
    return document.documentElement.offsetWidth > document.documentElement.clientWidth;
}

问题2

怎么判断页面是否出现横向滚动条？

Answer 1

html的clientHeight/Width是会随着窗口大小而改变的，这个属性值是可见宽高，body的clientHeight/Widht是元素宽高，不随窗口改变而改变，所以如果你通过body来判断，那是判断不出来的

横向滚动条offsetWidth和clientWidth可以，你说完全一样是因为你压根没有滚动条吧，随便在segmentfault页面加个overflow和width都能看到offsetWidth和clientWidth是不同的

Answer 2

问题一，document.body指向的是body，document.documentElement指向的是html，这个你console一下就了解了。

问题二，你试一下和document.documentElement.scrollWidth比较

Answer 3

应该有一个场景的

比如说， 点击某一个按钮后。。

如果是这样那就好判断了

• 页面加载时建立一个变量保存页面文档的宽度

• 场景发生后再次判断文档的宽度，　不一致（变大）即说明出现滚动条

---

你可能想知道有没有ａｐｉ能判断页面是否出现横向滚动条：

• 据我所知： 没有