javascript - div 滚动条宽度

Question

是否有使用 javascript/jquery 获取滚动条宽度的简单方法？ 我需要得到溢出的 div 的宽度 + 滚动条的任何宽度。

谢谢

Answer 1

如果你正在使用 jquery，试试这个:

function getScrollbarWidth() 
{
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'auto'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2);
}

我在我正在从事的项目中使用它，它就像一个魅力。它通过以下方式获取滚动条宽度:

1. 将内容溢出的 div 附加到正文(在不可见区域，-200px 到顶部/左侧)
2. 将溢出设置为隐藏
3. 获取宽度
4. 将溢出设置为auto(以获得滚动条)
5. 获取宽度
6. 将两个宽度相减得到滚动条的宽度

所以您需要做的是获取 div 的宽度 ($('#mydiv').width()) 并添加滚动条宽度:

var completewidth = $('#mydiv').width() + getScrollbarWidth();