6

window.innerHeight gives the height of the viewport including the height of the horizontal scrollbar. Is there a way to find the usable inner-height, i.e. one which does not include the horizontal scrollbar?

I am ideally looking for a pure JS solution, but if there isn't one, jQuery etc is fine too.

Himanshu P
  • 9,586
  • 6
  • 37
  • 46
  • What are you talking about? `.innerHeight` does not include the scrollbar. http://www.w3schools.com/jsref/prop_win_innerheight.asp – StackSlave Oct 31 '13 at 23:31
  • 2
    Yeah, that's what I thought, but it seems it does. – Himanshu P Oct 31 '13 at 23:33
  • From MDN: "Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar" – Himanshu P Oct 31 '13 at 23:34
  • Hmm, I actually tested on Chrome and it DOES include the horizontal scrollbar height. Plus I would trust MDN more than the crap w3schools anyday. Can you please cancel your downvote now, I really need an answer to this? :) – Himanshu P Oct 31 '13 at 23:35
  • Possible duplicate of [Get the height and width of the browser viewport without scrollbars using jquery?](https://stackoverflow.com/questions/8794338/get-the-height-and-width-of-the-browser-viewport-without-scrollbars-using-jquery) – user10089632 Nov 26 '17 at 16:10

3 Answers3

1

I found a solution here: scrollbar detection demo (can I place links to other people's website here?)

The following two functions are used:

// check current presence of H & V scrollbars
// @return array [ Boolean, Boolean ]
function getSBLive(w) {
    var d = w.document, c = d.compatMode;
    r = c && /CSS/.test(c) ? d.documentElement : d.body;
    if (typeof w.innerWidth == 'number') {
        return [ w.innerWidth > r.clientWidth, w.innerHeight > r.clientHeight ];
    } else {
        return [ r.scrollWidth > r.clientWidth, r.scrollHeight > r.clientHeight ];
    }
}

// get current H & V scrollbars tickness
// @return array [ Number, Number ]
function getSBSize(w) {
    var d = w.document, b = d.body, r = [ 0, 0 ], t;
    if (b) {
        t = d.createElement('div');
        t.style.cssText = 'position:absolute;overflow:scroll;top:-100px;left:-100px;width:100px;height:100px;';
        b.insertBefore(t, b.firstChild);
        r = [ t.offsetHeight - t.clientHeight, t.offsetWidth - t.clientWidth ];
        b.removeChild(t);
    }
    return r;
}

You can then use these functions to find the window height without scrollbar:

var sbLive = getSBLive(window);
var sbSize = getSBSize(window);

var windowHeightWithoutScrollBar = sbLive[0] ? sbSize[0] : 0;
Hendrik Jan
  • 4,396
  • 8
  • 39
  • 75
1

What if I told you it's easier than you think (or than you thought back then) document.body.clientWidth;

user10089632
  • 5,216
  • 1
  • 26
  • 34
0

The jQuery solution is $(window).height();.

StackSlave
  • 10,613
  • 2
  • 18
  • 35