div滚动条宽度

有没有一种简单的方法来使用javascript / jquery获取滚动条的宽度？ 我需要得到溢出的div的宽度+滚动条的宽度。

谢谢

Answer 1

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

function getScrollbarWidth() { var 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() ）并添加scrollbar-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 = div.firstChild; body.appendChild(div); W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth; body.removeChild(div); } return W; };