div滚动条宽度
有没有一种简单的方法来使用javascript / jquery获取滚动条的宽度? 我需要得到溢出的div的宽度+滚动条的宽度。
谢谢
如果你正在使用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); }
我在我正在研究的项目中使用它,它就像一个魅力。 它得到滚动条宽度:
- 向主体添加带有溢出内容的div(在不可见区域,-200px到顶部/左侧)
- 设置溢出到
hidden
- 得到宽度
- 将溢出设置为
auto
(获取滚动条) - 得到宽度
- 减去两个宽度以获得滚动条的宽度
所以你要做的就是得到div的宽度( $('#mydiv').width()
)并添加scrollbar-width:
var completewidth = $('#mydiv').width() + getScrollbarWidth();
试试这个
$("#myDiv")[0].scrollWidth
将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); }
这是一个简单的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; };