Javascript 如何计算滚动条的宽度？

How to calculate the width of the scroll bar?

提问by Misha Moroshko

Given a <textarea>with a fixed width, I would like its "active width" to be constant (in px). By "active width" I mean the area where the text appears.

给定一个<textarea>固定的width，我希望它的“活动宽度”是恒定的（in px）。“活动宽度”是指文本出现的区域。

When the vertical scroll bar doesn't appear, the "active width" equals to width. But, when the vertical scroll bar appears, the "active width" becomes smaller than width(I guess smaller exactly by the width of the scroll bar).

当垂直滚动条不出现时，“活动宽度”等于width。但是，当垂直滚动条出现时，“活动宽度”变得小于width（我猜正好小于滚动条的宽度）。

I thought to identify whether the vertical scroll bar appears or not, and if yes, to increase the width of the <textarea>by the width of the scroll bar. How could I identify the width of the scroll bar?

我想确定是否出现垂直滚动条，如果是，<textarea>则将滚动条的宽度增加到滚动条的宽度。如何识别滚动条的宽度？

Is there a better approach?

有没有更好的方法？

(I'm interested in Firefox, if it makes the life easier.)

（我对 Firefox 感兴趣，如果它能让生活更轻松。）

采纳答案by David Houde

There is a jQuery plugin that can help with this: https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

有一个 jQuery 插件可以帮助解决这个问题：https: //github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

Also, from http://www.alexandre-gomes.com/?p=115Here is some code that may help.

另外，来自http://www.alexandre-gomes.com/?p=115这里有一些可能有帮助的代码。

This creates a hidden <p>element at 100% width inside a <div>with a scrollbar, then calculates the <div>width - the <p>width = scroll bar width.

这会<p>在<div>带有滚动条的a 内创建一个100% 宽度的隐藏元素，然后计算<div>宽度 -<p>宽度 = 滚动条宽度。

function getScrollBarWidth () { 
  var inner = document.createElement('p'); 
  inner.style.width = "100%"; 
  inner.style.height = "200px"; 

  var outer = document.createElement('div'); 
  outer.style.position = "absolute"; 
  outer.style.top = "0px"; 
  outer.style.left = "0px"; 
  outer.style.visibility = "hidden"; 
  outer.style.width = "200px"; 
  outer.style.height = "150px"; 
  outer.style.overflow = "hidden"; 
  outer.appendChild (inner); 

  document.body.appendChild (outer); 
  var w1 = inner.offsetWidth; 
  outer.style.overflow = 'scroll'; 
  var w2 = inner.offsetWidth; 
  if (w1 == w2) w2 = outer.clientWidth; 

  document.body.removeChild (outer); 

  return (w1 - w2); 
}; 

回答by Semra

Scrollbar width is simply (offsetWidth - clientWidth) in a borderless! element. This function calculates it on the fly and caches the result for further use. No need need for percentage width etc.

滚动条的宽度简直就是(offsetWidth - clientWidth) 中的无边框！元素。此函数动态计算它并缓存结果以供进一步使用。不需要百分比宽度等。

var getScrollbarWidth = function() {
  var div, width = getScrollbarWidth.width;
  if (width === undefined) {
    div = document.createElement('div');
    div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
    div = div.firstChild;
    document.body.appendChild(div);
    width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
    document.body.removeChild(div);
  }
  return width;
};

回答by Oliver

Maybe you could put

也许你可以把

overflow-y:scroll;

in your css. This forces the scrollbar to be present even when the text area is blank, so the width is always constant.

在你的 css 中。即使文本区域为空白，这也会强制滚动条存在，因此宽度始终不变。

回答by Joshua Bambrick

Using jQuery, simply write:

使用 jQuery，只需编写：

function getScrollBarWidth () {
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    return 100 - widthWithScroll;
};

回答by Caleb Runion

I believe this is a more straightforward solution: (assuming body {width:100%;})

我相信这是一个更直接的解决方案：（假设body {width:100%;}）

function calculateScrollBarWidth() {
  return window.innerWidth - document.body.clientWidth;
}

回答by dekdev

I was looking for something similar - here is what i found

我正在寻找类似的东西 - 这是我发现的

 function measureScrollbar() {
      var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");
      var dim = {
        width: $c.width() - $c[0].clientWidth,
        height: $c.height() - $c[0].clientHeight
      };
      $c.remove();
      return dim;
    }

Source : Slickgriduses this - https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L378

来源：Slickgrid使用这个 - https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L378

Or

或者

Use Google Closure Library -link

使用 Google Closure Library -链接

/**
 * Returns the scroll bar width (represents the width of both horizontal
 * and vertical scroll).
 *
 * @param {string=} opt_className An optional class name (or names) to apply
 *     to the invisible div created to measure the scrollbar. This is necessary
 *     if some scrollbars are styled differently than others.
 * @return {number} The scroll bar width in px.
 */
goog.style.getScrollbarWidth = function(opt_className) {
  // Add two hidden divs.  The child div is larger than the parent and
  // forces scrollbars to appear on it.
  // Using overflow:scroll does not work consistently with scrollbars that
  // are styled with ::-webkit-scrollbar.
  var outerDiv = goog.dom.createElement('div');
  if (opt_className) {
    outerDiv.className = opt_className;
  }
  outerDiv.style.cssText = 'overflow:auto;' +
      'position:absolute;top:0;width:100px;height:100px';
  var innerDiv = goog.dom.createElement('div');
  goog.style.setSize(innerDiv, '200px', '200px');
  outerDiv.appendChild(innerDiv);
  goog.dom.appendChild(goog.dom.getDocument().body, outerDiv);
  var width = outerDiv.offsetWidth - outerDiv.clientWidth;
  goog.dom.removeNode(outerDiv);
  return width;
};

回答by Sudhir Bastakoti

I think this helps to get the width of scrollbar.

我认为这有助于获得滚动条的宽度。

textarea.scrollHeight

gives the height so cant this be used..

给出了高度，所以不能使用..

回答by max

CSS:

CSS：

.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}

Vanilla JS:

香草JS：

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

Solution by David Walsh

大卫沃尔什的解决方案

回答by ekerner

With jQuery:

使用 jQuery：

var t = jQuery('<textarea/>').css({
    position: 'absolute', 
    top: '-100px',
    overflowX: 'hidden',
    overflowY: 'scroll'
}).prependTo('body'),
w = t[0].offsetWidth - t[0].clientWidth;
console.log('bar width = ', w);
t.remove();

bar width = 18

条宽 = 18