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. 集溢出hidden
3. 得到宽度
4. 集溢流到auto（以获得滚动条）
5. 得到宽度
6. 两者。减去宽度以得到滚动条的宽度

所以你要做的就是让你的div（$('#mydiv').width()）的宽度并添加滚动条宽度什么：

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

Answer 2

这是一个普通的JavaScript版本是这样更快。

function getScrollbarWidth() { 
    var div, body, W = window.browserScrollbarWidth; 
    if (W === undefined) { 
    body = document.body, div = document.createElement('div'); 
    div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>'; 
    div = div.firstChild; 
    body.appendChild(div); 
    W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth; 
    body.removeChild(div); 
    } 
    return W; 
}; 

Answer 3

设置一个div的溢出“scroll”自动添加scrollbars（即使没有什么的里面，scrollbars会在那里，但灰色）。因此，只要一格，找到宽度，设置溢出滚动，并找到新的宽度，并返回的区别：

function getScrollBarWidth() { 
    var helper = document.createElement('div'); 
    helper.style = "width: 100px; height: 100px; overflow:hidden;" 
    document.body.appendChild(helper); 
    var bigger = helper.clientWidth; 
    helper.style.overflow = "scroll"; 
    var smaller = helper.clientWidth; 
    document.body.removeChild(helper); 
    return(bigger - smaller); 
} 

Answer 4

试试这个

$("#myDiv")[0].scrollWidth