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

尝试这个

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

Answer 3

将div的溢出设置为“ scroll ”会自动添加scrollbars （即使内部没有任何内容， scrollbars也会在那里，但是灰色）。 所以只需创建一个div，找到宽度，设置溢出以滚动，找到新的宽度，并返回差异：

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

这是一个简单的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;
};