How to know if the scrollbars has appeared in browser (jQuery)?

Question

I need to know, whether a vertical scrollbar has appeared or not in browser window. Is it possible using jQuery or any other way?

SLaks · Accepted Answer · 2010-05-26T13:41:11.410

7

Like this:

if (document.documentElement.scrollHeight === document.documentElement.clientHeight) {
    //There is no vertical scrollbar
}

This doesn't work in IE

edited May 26 '10 at 13:41

answered May 26 '10 at 13:32

SLaks

The scroll-bar may be explicitly hidden via `body { overflow-y: hidden; }`, in which case your code would report a false positive... – Šime Vidas Mar 28 '12 at 19:20
This also doesn't work for when the body itself is small, but an absolutely positioned element has moved partially beyond the viewport and caused the UA to show scrollbars (the body height/width doesn't change in that instance, but there are definitely scrollbars present). – Robert C. Barth Jul 18 '12 at 22:57

score 4 · Answer 2 · answered Feb 08 '12 at 01:39

4

This is an old post but I finally got the code that also works on IE7. Hope this can help someone.

var hasScrollbar = $('body').outerHeight() > $(window).height();

answered Feb 08 '12 at 01:39

Aximili

This doesn't work for absolutely positioned elements that are beyond the viewport (causing scrollbars) when the body itself is small. – Robert C. Barth Jul 18 '12 at 22:55

score 1 · Answer 3 · answered May 26 '10 at 13:31

1

Compare the document height with the window height. If it's more there's probably a scrollbar unless you disabled it.

answered May 26 '10 at 13:31

CharlesLeaf

Wrong. The window height includes chrome elements like toolbars and menus. – SLaks May 26 '10 at 13:32
Ah yes I actually meant to type viewport height, my bad. – CharlesLeaf May 26 '10 at 13:40

3 Answers3