JQuery Dimensions should have a method to return the scrollbar size

JQuery Dimensions should have a method to return the scrollbar size

I recently posted this on StackOverflow and thought I could share it. I originally found it on Alexandre Gomes site, but modified it and implemented it for JQuery.

It works in Chrome and FF and should work in IE as well, but I cannot test it in all browsers.


  1. jQuery.getScrollBarSize = function() {
  2.    var inner = $('<p></p>').css({
  3.       'width':'100%',
  4.       'height':'100%'
  5.    });
  6.    var outer = $('<div></div>').css({
  7.       'position':'absolute',
  8.       'width':'100px',
  9.       'height':'100px',
  10.       'top':'0',
  11.       'left':'0',
  12.       'visibility':'hidden',
  13.       'overflow':'hidden'
  14.    }).append(inner);
  15.       
  16.    $(document.body).append(outer);
  17.          
  18.    var w1 = inner.width(), h1 = inner.height();
  19.    outer.css('overflow','scroll');
  20.    var w2 = inner.width(), h2 = inner.height();
  21.    if (w1 == w2 && outer[0].clientWidth) {
  22.       w2 = outer[0].clientWidth;
  23.    }
  24.    if (h1 == h2 && outer[0].clientHeight) {
  25.       h2 = outer[0].clientHeight;
  26.    }
  27.         
  28.    outer.detach();
  29.         
  30.    return [(w1 - w2),(h1 - h2)];
  31. };