Question

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

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

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

我在没有滚动条的空白页面和带有滚动条的页面中测试了这段代码，结果不正确（我得知在没有滚动条的页面上有滚动条）。

有什么想法吗？

Answer 1

我认为以下功能会帮助你

  function VerticalScrollExist() {
        if (window.innerHeight) {
            return document.body.offsetHeight > innerHeight;
        }
        else {
            return document.documentElement.scrollHeight > document.documentElement.offsetHeight || document.body.scrollHeight > document.body.offsetHeight;
        }
    }

    function HorizontalScrollExist() {
        if (window.innerWidth) {
            return document.body.offsetWidth > innerWidth;
        }
        else {
            return document.documentElement.scrollWidth > document.documentElement.offsetWidth || document.body.scrollWidth > document.body.offsetWidth;
        }
    }

Answer 2

在这里，您可以看到我尝试查询几个属性的位置：

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

将#shell设置为视口大小以下： http://jsfiddle.net/mori57/8t8Dy/6/

我想我找到了一个你可以使用的键，至少对于滚动测试...正如你所看到的，在#shell被设置为视口大小（window.innerWidth）的宽度的情况下， body scrollWidth大于getBoundingClientWidth（）。width。

报告的宽度

（对不起，Pragnesh，你的函数似乎不适用于我的例子，它也包含在我的jsFiddle的测试页面中。）

为此，在大多数情况下，以下功能应该起作用：

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

内容小于视口大小的案例： http://jsfiddle.net/mori57/8t8Dy/11/

内容大于视口大小的案例： http://jsfiddle.net/mori57/8t8Dy/12/

有没有垂直或水平滚动条？

2 个答案: