As I’ve recently started developing a custom scrollbar plugin, I was looking for a way to detect the browser scrollbars width.

As you may know, there is no specification on the size of those elements and they are different from platform to platform (and from browser to browser).

Hopefully, calculating the size is not difficult thanks to two DOM properties: offsetWidth and clientWidth.
offsetWidth returns the layout width of an element and it is a measurement which includes borders, padding and scrollbar (if any).
clientWidth instead returns the inner width of an element without borders and scrollbar.

So, getting the scrollbar width is as simple as subtracting clientWidth to offsetWidth on an element with forced scrollbars and without padding.

// thanks Google Closure Library
function getScrollbarWidth () {
  var htmlEl = document.documentElement,
      outerEl, innerEl, width = 0;

  outerEl = document.createElement('div');
  outerEl.style.cssText = 'overflow:scroll;width:50px;height:50px;' + 'position:absolute;left:-100px';

  innerEl = document.createElement('div');
  innerEl.style.cssText = 'width:100px;height:100px';

  outerEl.appendChild(innerEl);
  htmlEl.appendChild(outerEl);
  width = outerEl.offsetWidth - outerEl.clientWidth;
  htmlEl.removeChild(outerEl);
  
  return width;
}