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.
- jQuery.getScrollBarSize = function() {
- var inner = $('<p></p>').css({
- 'width':'100%',
- 'height':'100%'
- });
- var outer = $('<div></div>').css({
- 'position':'absolute',
- 'width':'100px',
- 'height':'100px',
- 'top':'0',
- 'left':'0',
- 'visibility':'hidden',
- 'overflow':'hidden'
- }).append(inner);
-
- $(document.body).append(outer);
-
- var w1 = inner.width(), h1 = inner.height();
- outer.css('overflow','scroll');
- var w2 = inner.width(), h2 = inner.height();
- if (w1 == w2 && outer[0].clientWidth) {
- w2 = outer[0].clientWidth;
- }
- if (h1 == h2 && outer[0].clientHeight) {
- h2 = outer[0].clientHeight;
- }
-
- outer.detach();
-
- return [(w1 - w2),(h1 - h2)];
- };