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

I need to be able to detect whether there are scrollbars (both vertical and horizontal) on a browser window. I've been using this code but it isn't working reliably in Firefox 5.

我需要能够检测浏览器窗口上是否有滚动条(垂直和水平)。我一直在使用这段代码,但它在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
    });
}

Is there a better way to do this that will work cross browser. My browser targets are Firefox 4-5, Chrome, Safari 4+, Opera 10+.

有没有更好的方法来实现跨浏览器的工作。我的浏览器目标是Firefox 4-5,Chrome,Safari 4 +,Opera 10+。

If you're interested in why I need to know if there are scrollbars, it's because I have some spinning CSS3 transitions that (due to the nature of their spinning) may temporarily go beyond the edges of the current document size (thus making the document temporarily larger). If were no scrollbars initially present, the CSS3 transition may cause scrollbars to show up during the transition and then go away when the transition is finished, leading to an ugly scrollbar flash. If I know that there are no scrollbars present, I can temporarily add a class that will set overflow-x or overflow-y to hidden and thus prevent the scrollbar flash during the CSS3 transition. If scrollbars are already present, I don't have to do anything because they may move a little, but they won't go on/off during the transition.

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

Bonus points if one can actually tell not only if scrollbars would generally be required, but whether they are actually there or not.

如果一个人实际上不仅可以告诉滚动条通常是否需要,而且它们是否实际存在,那么奖励积分。

3 个解决方案

#1

After running into flicker problems with the scrolling version proposed by David in some browsers (Safari and IE), I've settled on this code that does not have the flicker problem:

使用David在某些浏览器(Safari和IE)中提出的滚动版本遇到闪烁问题后,我已经确定了这个没有闪烁问题的代码:

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);
}

It's a derivative of what I was using and the general technique was referenced in the post that fanfavorite posted. It seems to work in every browser I've tried even in IE6. For my purposes, I wanted any failure to return that there was a scrollbar so I've coded the failure condition that way.

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

Note: this code does not detect if a scrollbar has been forced on or off with CSS. This code detects if an auto-scrollbar is called for or not. If your page might have CSS settings that control the scrollbar, then you can get the CSS and check that first.

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

#2

Have you taken a look at this other post? How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?

你看过这篇文章吗?如何在HTML iFrame中检测滚动条的存在(使用Javascript)?

#3

It's actually pretty easy. This will work in every modern browser:

这实际上非常简单。这适用于所有现代浏览器:

// 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);

#1