148

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

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

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

9 回答 9

286

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

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;

}

这里的基本步骤是：

  1. 创建隐藏的 div（外部）并获取它的偏移宽度
  2. 使用 CSS 溢出属性强制滚动条出现在 div（外部）中
  3. 创建新的 div（内部）并附加到外部，将其宽度设置为 '100%' 并获取偏移宽度
  4. 根据收集的偏移量计算滚动条宽度

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

更新

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

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

于 2012-11-14T16:25:54.227 回答
50

// offsetWidth包括滚动条的宽度，而clientWidth不包括。通常，它等于 14-18px。所以：

 var scrollBarWidth = element.offsetWidth - element.clientWidth;
于 2016-11-12T23:11:51.077 回答
23

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

var scrollWidth= window.innerWidth-$(document).width()
于 2017-07-18T07:34:03.490 回答
15

如果孩子占据了容器的全部宽度，不包括滚动条（默认），那么您可以减去宽度：

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;
于 2012-11-14T16:09:05.283 回答
8

如果你使用 jquery。ui，试试这个代码：

$.position.scrollbarWidth()
于 2017-02-20T12:29:03.957 回答
4

这是使用 jQuery 的简单方法。

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

基本上我们从总宽度中减去可滚动宽度，这应该提供滚动条的宽度。当然，您希望缓存 jQuery('div.withScrollBar') 选择，这样您就不会重复该部分。

于 2014-11-25T08:06:27.883 回答
4

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

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

另请参阅此答案以获取更多详细信息。

于 2015-09-09T23:45:04.207 回答
3

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

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 的移动设备）。

于 2014-03-19T15:10:08.840 回答
0

这对我有用..

 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); 
}
于 2015-08-26T17:17:35.663 回答