找到DOM滚动条宽度

时间:2012-09-27 12:52:36

标签: javascript jquery browser-feature-detection

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

我发现这个代码试图检测它,但是,它似乎无法在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;
}

1 个答案:

答案 0 :(得分:0)

你为什么要这样做?一些上下文会很好。如果您正在尝试制作自定义主题滚动条,则有许多脚本可以执行此操作,其中一个好的脚本是jQuery Scrollbars