javascript div 滚动条宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7501761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div scrollbar width
提问by G-Man
Is there an easy way to get the width of a scrollbar using javascript / jquery ? I need to get the width of a div that overflows + whatever width the scroll bar is.
有没有一种简单的方法可以使用 javascript/jquery 获取滚动条的宽度？我需要获取溢出的 div 的宽度 + 滚动条的任何宽度。
Thank you
谢谢
回答by oezi
if you're using jquery, try this:
如果你使用 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);
}
i'm using this in the project i'm working on and it works like a charm. it gets the scrollbar-width by:
我在我正在从事的项目中使用它，它就像一个魅力。它通过以下方式获取滚动条宽度：
- appending a div with overflowing content to the body (in a non-visible area, -200px to top/left)
- set overflow to
hidden - get the width
- set overflow to
auto(to get scrollbars) - get the width
- substract both widths to get width of the scrollbar
- 将带有溢出内容的 div 附加到正文（在不可见区域，-200px 到顶部/左侧）
- 将溢出设置为
hidden - 获取宽度
- 将溢出设置为
auto（以获取滚动条） - 获取宽度
- 减去两个宽度以获得滚动条的宽度
so what you'll have to do is getting the width of your div ($('#mydiv').width()) and add the scrollbar-width:
所以你需要做的是获取 div ( $('#mydiv').width()) 的宽度并添加滚动条宽度：
var completewidth = $('#mydiv').width() + getScrollbarWidth();
回答by dav
try this
试试这个
$("#myDiv")[0].scrollWidth
$("#myDiv")[0].scrollWidth
回答by woojoo666
Setting a div's overflow to "scroll" automatically adds scrollbars(even if there's nothing inside, the scrollbarswill be there, but grey). So just make a div, find the width, set overflow to scroll, and find the new width, and return the difference:
将 div 的溢出设置为 " scroll" 会自动添加scrollbars（即使里面没有任何东西，它scrollbars也会在那里，但是是灰色的）。所以只要做一个div，找到宽度，设置overflow来滚动，找到新的宽度，返回差值：
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);
}
回答by Semra
Here is a plain javascript version that is way faster.
这是一个速度更快的普通 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;
};
