javascript - 有垂直或水平滚动条吗？

Question

我正在尝试找到一种方法来告诉我页面是否有垂直和水平滚动条，但没有办法工作。
我不会使用 jQuery。
这就是我所做的:

function hasVerticalScroll() {
    return document.body.getBoundingClientRect().height >= window.innerHeight;
}

function hasHorizontalScroll() {
    return document.body.getBoundingClientRect().width >= window.innerWidth;
}

我在没有滚动条的空白页面和有滚动条的页面上测试了这段代码，但我得到了错误的结果(例如，我知道在没有滚动条的页面上有一个滚动条)。

有什么想法吗？

Answer 1

在这里你可以看到我在哪里尝试查询几个属性:

将#shell 设置为大于视口(viewport)大小: http://jsfiddle.net/mori57/8t8Dy/5/

将#shell 设置为低于视口(viewport)大小: http://jsfiddle.net/mori57/8t8Dy/6/

我想我找到了一个您可以使用的键，至少可以用于滚动测试...如您所见，在#shell 设置为超过视口(viewport)大小 (window.innerWidth) 的宽度的情况下， body scrollWidth 大于 getBoundingClientWidth().width 报告的宽度。

(抱歉，Pragnesh，您的函数在我的示例中似乎不起作用，它也包含在我的 jsFiddle 测试页面中。)

为此，以下函数应该在大多数情况下有效:

function HasHorizontalScroll(){
     return document.body.scrollWidth > window.innerWidth;
}

内容小于视口(viewport)大小的情况: http://jsfiddle.net/mori57/8t8Dy/11/

内容大于视口(viewport)大小的情况: http://jsfiddle.net/mori57/8t8Dy/12/