3

垂直スクロールバーと水平スクロールバーのピクセル幅を調べたいのですが。私はそれらが異なるOS/ブラウザによって異なることを知っています。

私はそれを検出しようとするこのコードを見つけましたが、残念ながら、IE7では機能しないようです：

function scrollbarWidth() {
    var scrollbarWidth = 0;                    
    if ($.browser.msie) {
        var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
        .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
        $textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
        .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
        scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
        $textarea1.add($textarea2).remove();
    } else {
        var $div = $('<div />')
        .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
        .prependTo('body').append('<div />').find('div')
        .css({ width: '100%', height: 200 });
        scrollbarWidth = 100 - $div.width();
        $div.parent().remove();
    }
    return scrollbarWidth;
}
4

2 に答える 2

2

この関数は、垂直スクロールバーの幅を示します。

function scrollbarWidth()
{
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";

    // for win 8
    outer.style.msOverflowStyle = "scrollbar";

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;

    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

この関数の主な手順は次のとおりです。

  • 幅100pxの外側のdivを作成します

  • 次に、スクロールバーを強制的に外側のdivに表示します

  • 新しい内部divを作成し、外部div内に追加します。高さを100％に設定します

  • 両方の幅の差を計算します。

同様に、垂直スクロールバーの幅と水平スクロールバーの高さの両方を取得して、外側のdivに特定の高さを設定し、次のように両方のdivの高さの差も計算することもできます。

function scrollbarWidthHeight()
{
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.height = "100px";

    // for win 8
    outer.style.msOverflowStyle = "scrollbar";

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    var heightNoScroll = outer.offsetHeight;

    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    inner.style.height = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;
    var heightWithScroll = inner.offsetHeight;

    // remove divs
    outer.parentNode.removeChild(outer);

    return {
        width: widthNoScroll - widthWithScroll,
        height: heightNoScroll - heightWithScroll
    };
}

chrome、firefox、IE6、IE8、およびsafariでテストされています。また、ネイティブJavaScript（DOM関数）を使用し、jQueryのような外部依存関係を使用しません:)

于 2015-05-02T01:00:59.827 に答える
0

なぜあなたはこれをしようとしているのですか？いくつかのコンテキストがいいでしょう。カスタムのテーマ対応スクロールバーを作成しようとしている場合、これを行うためのスクリプトはたくさんありますが、jQueryスクロールバーが適しています。

于 2012-10-02T01:48:53.650 に答える