6

ブラウザウィンドウにスクロールバー（垂直方向と水平方向の両方）があるかどうかを検出できる必要があります。私はこのコードを使用していますが、Firefox5では確実に機能していません。

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

クロスブラウザで動作するこれを行うためのより良い方法はありますか？私のブラウザのターゲットはFirefox4-5、Chrome、Safari 4以降、Opera10以降です。

スクロールバーがあるかどうかを知る必要がある理由に興味がある場合は、CSS3トランジションが回転しているため、（回転の性質上）一時的に現在のドキュメントサイズの端を超える可能性があります（したがって、ドキュメントが作成されます）。一時的に大きくなります）。最初にスクロールバーが存在しなかった場合、CSS3トランジションにより、トランジション中にスクロールバーが表示され、トランジションが終了すると消えて、スクロールバーが醜く点滅する可能性があります。スクロールバーが存在しないことがわかっている場合は、overflow-xまたはoverflow-yをhiddenに設定するクラスを一時的に追加して、CSS3の移行中にスクロールバーが点滅しないようにすることができます。スクロールバーがすでに存在する場合は、少し動く可能性があるため何もする必要はありませんが、移行中にオン/オフになることはありません。

スクロールバーが一般的に必要かどうかだけでなく、実際にそこにあるかどうかを実際に知ることができる場合のボーナスポイント。

4

3 に答える 3

5

一部のブラウザ（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);
}

これは私が使用していたものの派生物であり、一般的な手法は、ファンのお気に入りが投稿した投稿で参照されていました。IE6でも試したすべてのブラウザで動作するようです。私の目的のために、私はスクロールバーがあったことを返すための失敗を望んでいたので、私はそのように失敗条件をコーディングしました。

注：このコードは、CSSでスクロールバーが強制的にオンまたはオフにされたかどうかを検出しません。このコードは、自動スクロールバーが呼び出されているかどうかを検出します。ページにスクロールバーを制御するCSS設定がある場合は、CSSを取得して最初に確認できます。

于 2011-07-10T05:34:04.867 に答える
2

この他の投稿を見たことがありますか？HTML iFrameで（Javascriptを使用して）スクロールバーの存在を検出するにはどうすればよいですか？

于 2011-07-07T03:11:37.623 に答える
1

実はとても簡単です。これは、最新のすべてのブラウザで機能します。

// 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);
于 2011-07-07T04:12:50.833 に答える