Question

所以，我一直试图找到一个好的jQuery方法来查找客户端的滚动条宽度。我以为我在我的小提琴中想到了它，但显然添加一个滚动条不会改变孩子宽度的任何东西。即使在开发工具（铬，FF）中，宽度也会减小。

function scrollbarWidth() {
    var div = $('<div class="outer"><div class="inner"></div>');
    $('body').append(div);

    var w1 = $(".inner").width();
    $(".test-text span:first").text(w1);
    console.log(w1);

    $(".test-div").css('overflow-y', 'scroll');
    var w2 = $(".inner").width();
    $(".test-text span:last").text(w2);

    console.log(w2);
}

scrollbarWidth();

使用innerWidth没有任何区别。

这怎么可能，什么是解决方案？

Answer 1

这是获取滚动条宽度的函数：

function getScrollBarWidth() {
    var inner = $('<p />', {style:'width:100%;height:200px;'}),
        outer = $('<div />', {style:'position:absolute;top:0;left:0;visibility:hidden;width:200px;height:150px;overflow:hidden;'});

    outer.append(inner).appendTo($('body'));

    var w1 = inner.get(0).offsetWidth;
    outer.css('overflow', 'scroll');
    var w2 = inner.get(0).offsetWidth;
    if (w1 == w2) w2 = outer.get(0).clientWidth;

    outer.remove();
    return (w1 - w2);
}

FIDDLE

get() 函数获取原生javascript DOM元素，因为offsetWidth是本机javascript方法，所以需要它，并且不适用于jQuery“元素”。它也可以写成：

var w1 = inner[0].offsetWidth;

父项获取滚动条后获取元素的宽度

1 个答案: