Question

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

是否可以确定滚动条的宽度？

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

Answer 1

此功能应该为您提供滚动条的宽度

function getScrollbarWidth() {

  // Creating invisible container
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement('div');
  outer.appendChild(inner);

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;

}

这里的基本步骤是：

创建隐藏的div（外部）并获取其偏移宽度
使用CSS溢出属性
创建新的div（内部）并追加到外部，将其宽度设置为“100％”并获得偏移宽度
根据收集的偏移计算滚动条宽度

这里的工作示例：http://jsfiddle.net/slavafomin/tsrmgcu9/

<强>更新

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

更新＃2 这在Mac OS上无法使用默认情况下“滚动时仅显示滚动条”设置（Yosemite和更高版本）。

Answer 2

// offsetWidth 包括滚动条的宽度，而 clientWidth 则不包括。按规则，它等于14-18px。这样：

{{1}}

Answer 3

如果孩子占据容器的整个宽度（滚动条除外）（默认值），则可以减去宽度：

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

Answer 4

我认为这将简单快捷 -

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

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的解决方案适用于IE7 +和所有其他现代浏览器（包括滚动条高度/宽度为0的移动设备）。

Answer 6

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

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

基本上我们从整体宽度中减去可滚动宽度，这应该提供滚动条的宽度。当然，你想要缓存jQuery（'div.withScrollBar'）选项，这样你就不会再做两次了。

Answer 7

如果您使用jquery。 ui ，请尝试以下代码：

$.position.scrollbarWidth()

使用JavaScript获取滚动条宽度

7 个答案: