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);
}

我在我正在研究的项目中使用它，它就像一个魅力。它得到滚动条宽度：

将一个内容溢出的div添加到正文中（在不可见区域，-200px到顶部/左侧）
将溢出设置为hidden
获取宽度
将溢出设置为auto（以获取滚动条）
获取宽度
减去两个宽度以获得滚动条的宽度

所以你需要做的就是获得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;
};

div滚动条宽度

4 个答案: