Reputation: 171351

How to calculate the width of the scroll bar?

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.

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?

Is there a better approach?

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

Upvotes: 26

Answers (9)

Caleb Runion

Reputation: 171

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

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

A solution to calculate the scrollbar width of any element (e.g. a div with overflow, or a textarea)

function calculateScrollbarWidth(element) {
  if (!element) {
    // Return the body scrollbar width, when no element was specified.
    return window.innerWidth - document.body.clientWidth;
  } else {
    // When an element is specified, return its specific scrollbar width.
    return element.offsetWidth - element.clientWidth;
  }
}

Upvotes: 9

ekerner

Reputation: 5840

With 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

Upvotes: 0

max

Reputation: 8667

CSS:

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

Vanilla 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

Upvotes: 0

Joshua Bambrick

Reputation: 2699

Using jQuery, simply write:

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

Upvotes: 3

aked

Reputation: 5815

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

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

Upvotes: 2

Semra

Reputation: 2993

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.

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

Upvotes: 10

David Houde

Reputation: 4778

There is a jQuery plugin that can help with this: 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.

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.

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

Upvotes: 18