如何计算滚动条的宽度？

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.

给定一个具有固定宽度的，我希望它的“活动宽度”是恒定的（以px为单位）。 “活动宽度”是指文本出现的区域。</p>

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).

当没有出现垂直滚动条时，“活动宽度”等于宽度。但是，当出现垂直滚动条时，“活动宽度”变得小于宽度（我猜测精确地小于滚动条的宽度）。

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?

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

Is there a better approach?

有更好的方法吗？

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

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

8 个解决方案

#1

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=115 Here 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.

这将在带有滚动条的

内创建100％宽度的隐藏

元素，然后计算

宽度 -

width =滚动条宽度。

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); 
};

#2

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;
};

#3

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。即使文本区域为空白，这也会强制滚动条出现，因此宽度始终保持不变。

#4

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 : Slickgrid uses this - https://github.com/mleibman/SlickGrid/blob/master/slick.grid.js#L378

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

要么

Use Google Closure Library -link

使用Google Closure Library -link

/**
 * 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;
};

#5

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;
};

#6

I think this helps to get the width of scrollbar.

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

textarea.scrollHeight

gives the height so cant this be used..

给出高度这么难以使用..

#7

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

David Walsh的解决方案

#8

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

#1