Question

我需要能够检测浏览器窗口上是否有滚动条（垂直和水平）。我一直在使用这段代码，但它在Firefox 5中无法正常运行。

JFL.GetScrollbarState = function () {
    var myWidth = 0;
    var myHeight = 0;
    if (document.documentElement && document.documentElement.clientWidth) {
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else {
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return ({
        vScrollbar: document.body.scrollHeight > myHeight,
        hScrollbar: document.body.scrollWidth > myWidth
    });
}

有没有更好的方法可以跨浏览器工作。我的浏览器目标是Firefox 4-5，Chrome，Safari 4 +，Opera 10 +。

如果你对我为什么需要知道是否有滚动条感兴趣，那是因为我有一些旋转的CSS3过渡（由于它们旋转的性质）可能会暂时超出当前文档大小的边缘（因此使文件暂时变大）。如果最初没有滚动条，则CSS3转换可能会导致滚动条在转换期间显示，然后在转换完成时消失，从而导致滚动条闪烁。如果我知道没有滚动条存在，我可以暂时添加一个类，将overflow-x或overflow-y设置为hidden，从而防止CSS3过渡期间滚动条闪烁。如果已经存在滚动条，我不需要做任何事情，因为它们可能会移动一点，但在转换过程中它们不会打开/关闭。

奖励积分如果实际上不仅可以告诉您是否需要滚动条，而且实际上是否确实存在滚动条。

Answer 1

在一些浏览器（Safari和IE）中遇到David提出的滚动版本的闪烁问题后，我已经确定了这个没有闪烁问题的代码：

function getScrollBarState() {
    var result = {vScrollbar: true, hScrollbar: true};
    try {
        var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
        result.vScrollbar = root.scrollHeight > root.clientHeight;
        result.hScrollbar = root.scrollWidth > root.clientWidth;
    } catch(e) {}
    return(result);
}

它是我正在使用的衍生物，并且在fanfavorite发布的帖子中引用了一般技术。它似乎适用于我在IE6中尝试的每个浏览器。出于我的目的，我希望任何失败的回归都有一个滚动条，所以我已经用这种方式编写了失败条件。

注意：此代码不会检测是否已使用CSS强制打开或关闭滚动条。此代码检测是否调用自动滚动条。如果您的页面可能具有控制滚动条的CSS设置，那么您可以获取CSS并首先检查它。

Answer 2

你看过这篇文章吗？ How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?

Answer 3

实际上很容易。这适用于所有现代浏览器：

// try scrolling by 1 both vertically and horizontally
window.scrollTo(1,1);

// did we move vertically?
if (window.pageYOffset != 0) {
 console.log("houston, we have vertical scrollbars");
}

// did we move horizontally?
if (window.pageXOffset != 0) {
 console.log("houston, we have horizontal scrollbars");
}

// reset window to default scroll state
window.scrollTo(0,0);

如何检测浏览器窗口中是否有滚动条？

3 个答案: