3

我想找到垂直和水平滚动条的像素宽度。我知道它们对于不同的操作系统/浏览器是不同的。

我发现这段代码试图检测它，但是唉，它似乎在 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 Scrollbars。

于 2012-10-02T01:48:53.650 回答