How to detect if there actually is a scrollbar in a browser window

Question

I'm trying to detect if there actually is a scrollbar being shown in the browser window. Answers to questions like this detect wether the content can be scrolled, but given modern os's and browsers, that doesn't always mean that there actually and constantly is a scrollbar. Does anyone know if/how that is possible?

Can you just compare the content's size to the window size? `if (div height/width > window.height/width`? — Jake Smith, May 07 '13 at 23:20
If you're worried about OSX scrollbars that are only visible when you're actually scrolling, don't. They're overlayed on the content, so they don't take any additional space. — bfavaretto, May 07 '13 at 23:23
I'm using a scroll navigation and want to create a menu along the vertical scrollbar, which is also mirroring the handle of the scrollbar. Depending on whether the scrollbar is permanently visible, the handle position is slightly different (because the overlay-styles don't have the little arrows at the top and bottom), which I would like to compensate for. If it's not possible, I could just hope it's not all that obvious with the overlay-scrollbars, but it would definitely be great if someone knew a way of detecting this. — Tobl, May 08 '13 at 00:18

score 0 · Answer 1 · edited Apr 15 '15 at 21:25

0

Or:

if (document.height > $(window).height()) {
  alert('VERTICAL SCROLLBARS');
}

Edit: With jQuery

edited Apr 15 '15 at 21:25

answered May 07 '13 at 23:24

Reko

98
1
9

...except that neither `document.height` nor `window.height` actually exist ;) – Dagg Nabbit May 07 '13 at 23:27
You are right, but it is still supported in browsers. Maybe as alternative document.body.scrollHeight? http://developer.mozilla.org/en-US/docs/dom/element.scrollheight – Reko May 07 '13 at 23:30
You probably meant `document.body.clientHeight > window.innerHeight`, but it's not accurate. A good site to test on is http://example.iana.org/ -- try it in the console, making the console taller and shorter to make scrollbars appear/disappear (edit: `document.body.scrollHeight` is probably the key, yeah) – Dagg Nabbit May 07 '13 at 23:31

score 0 · Answer 2 · edited May 23 '17 at 12:03

function getScrollBarState() {
    var result = {vScrollbar: true, hScrollbar: true};
    try {
        var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
        result.vScrollbar = root.scrollHeight > root.clientHeight;
        result.hScrollbar = root.scrollWidth > root.clientWidth;
    } catch(e) {}
    return(result);
}

Response from : How do I detect if there are scrollbars on a browser window?

How to detect if there actually is a scrollbar in a browser window

2 Answers2