如何檢測瀏覽器 window 上是否有滾動條？

Question

我需要能夠檢測瀏覽器 window 上是否有滾動條（垂直和水平）。 我一直在使用此代碼，但它在 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 過渡（由於它們的旋轉性質）可能暫時 go 超出當前文檔大小的邊緣（從而使文檔暫時較大）。 如果最初沒有滾動條，CSS3 過渡可能會導致滾動條在過渡期間出現，然后在過渡完成后 go 消失，從而導致丑陋的滾動條 ZA39401275D1B3040AA789FB22AEA41。 如果我知道不存在滾動條，我可以臨時添加一個 class 將溢出-x 或溢出-y 設置為隱藏，從而防止在 Z2BE25667A86187FFE0B9A61DD3C8573D 過渡期間滾動條 flash。 如果滾動條已經存在，我不需要做任何事情，因為它們可能會移動一點，但在過渡期間它們不會 go 開/關。

如果一個人實際上不僅可以判斷是否通常需要滾動條，而且可以判斷它們是否真的存在，那么獎勵積分。

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

你看過這個其他帖子嗎？ 如何在 HTML iFrame 中檢測滾動條的存在（使用 Javascript ）？

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