使用JavaScript获取滚动条宽度

以下HTML将在div.container的右侧内部边缘显示一个滚动条。

是否有可能确定该滚动条的宽度？

<div class="container" style="overflow-y:auto; height:40px;"> <div class="somethingBig"></div> </div> 

Answer 1

这个函数应该给你滚动条的宽度

 function getScrollbarWidth() { var outer = document.createElement("div"); outer.style.visibility = "hidden"; outer.style.width = "100px"; outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps document.body.appendChild(outer); var widthNoScroll = outer.offsetWidth; // force scrollbars outer.style.overflow = "scroll"; // add innerdiv var inner = document.createElement("div"); inner.style.width = "100%"; outer.appendChild(inner); var widthWithScroll = inner.offsetWidth; // remove divs outer.parentNode.removeChild(outer); return widthNoScroll - widthWithScroll; } 

这里的基本步骤是：

1. 创build宽度设置为“100px”的隐藏div（外部）并获得偏移宽度（应为100）
2. 使用CSS溢出属性强制滚动条出现在div（外部）中
3. 创build新的div（内部）并追加到外部，将其宽度设置为“100％”并获得偏移宽度
4. 根据收集的偏移量计算滚动条宽度

工作示例： http : //jsfiddle.net/UU9kg/17/

更新

如果您在Windows（metro）应用程序上使用此function，请确保将“外部”div的-ms-overflow-style属性设置为scrollbar ，否则将无法正确检测宽度。 （代码更新）

更新＃2这不适用于Mac OS默认的“滚动时只显示滚动条”设置（优胜美地及以上）。

Answer 2

如果孩子获得不包含滚动条的容器的全部宽度（默认值），则可以减去宽度：

 var child = document.querySelector(".somethingBig"); var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth; 

Answer 3

// offsetWidth包含滚动条的宽度， clientWidth不包含。 作为规则，它等于14-18px。 所以：

  var scrollBarWidth = element.offsetWidth - element.clientWidth; 

Answer 4

假设容器只在页面上一次，而你使用的是jQuery，那么：

 var containerEl = $('.container')[0]; var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth; 

另请参阅此答案了解更多详情。

Answer 5

我用下一个函数来获得滚动条的高度/宽度：

 function getBrowserScrollSize(){ var css = { "border": "none", "height": "200px", "margin": "0", "padding": "0", "width": "200px" }; var inner = $("<div>").css($.extend({}, css)); var outer = $("<div>").css($.extend({ "left": "-1000px", "overflow": "scroll", "position": "absolute", "top": "-1000px" }, css)).append(inner).appendTo("body") .scrollLeft(1000) .scrollTop(1000); var scrollSize = { "height": (outer.offset().top - inner.offset().top) || 0, "width": (outer.offset().left - inner.offset().left) || 0 }; outer.remove(); return scrollSize; } 

这个基于jQuery的解决scheme适用于IE7 +和所有其他现代浏览器（包括滚动条高度/宽度将为0的移动设备）。

Answer 6

这是一个使用jQuery的简单方法。

 var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width(); 

基本上我们从总宽度中减去可滚动的宽度，并且应该提供滚动条的宽度。 当然，你会想要cachingjQuery（'div.withScrollBar'）select，所以你不会两次做这个部分。

Answer 7

如果您使用jquery.ui，请尝试下面的代码：

 $.position.scrollbarWidth() 

Answer 8

我认为这将是简单而快速的 –

 var scrollWidth= window.innerWidth-$(document).width() 

Answer 9

这对我工作..

  function getScrollbarWidth() { var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); $('body').append(div); var w1 = $('div', div).innerWidth(); div.css('overflow-y', 'scroll'); var w2 = $('div', div).innerWidth(); $(div).remove(); return (w1 - w2); }