4

How to get the browser window size without the width and height of the scroll bars?

When I use this method, I'm playing with the width and height of the scroll bars to come up with 34. 

     var $windowW = ($(window).width() - 34);
     var $windowH = ($(window).height() - 34);
     alert($windowW + "  " + $windowH); // THe results are width 1440 and 745 height
     $("body").css("width", $windowW);
     $("body").css("height", $windowH);
     $("body").css("border","1px solid green");
Yetimwork Beyene
  • 2,239
  • 5
  • 27
  • 33

1 Answers1

4
function getScrollBarDimensions(){
var elm = document.documentElement.offsetHeight ? document.documentElement : document.body,

    curX = elm.clientWidth,
    curY = elm.clientHeight,

    hasScrollX = elm.scrollWidth > curX,
    hasScrollY = elm.scrollHeight > curY,

    prev = elm.style.overflow,

    r = {
    vertical: 0,
    horizontal: 0
    };


    if( !hasScrollY && !hasScrollX ) {
    return r;
    }

elm.style.overflow = "hidden";

    if( hasScrollY ) {
    r.vertical = elm.clientWidth - curX;
    }

    if( hasScrollX ) {
    r.horizontal = elm.clientHeight - curY;
    }
elm.style.overflow = prev;


return r;
}

Running getScrollBarDimensions(); on this page yields:

Object
horizontal: 0
vertical: 17

for me in google chrome, IE7, opera and firefox.

Esailija
  • 138,174
  • 23
  • 272
  • 326
  • thanks Esailija, this looks like javascript, how do I get the return value for both vertical and horizantal using this function? – Yetimwork Beyene Nov 22 '11 at 03:16
  • @YetimworkBeyene, `var dimensions = getScrollBarDimensions();` `alert( dimensions.horizontal +"\n"+ dimensions.vertical );` – Esailija Nov 22 '11 at 03:23
  • @Esailija If I'm not mistaken this gets the dimensions of the document not of the window. – Lior Feb 04 '14 at 10:02
  • giving me 0 value for both horizontal and vertical even when my page has both vertical and horizontal scrolls. – Imran Bughio Jan 18 '16 at 22:22