Robert Koritnik Robert Koritnik - 1 year ago 106
Javascript Question

Check whether HTML element has scrollbars

What's the fastest way of checking whether an element has scroll bars?

One thing of course is checking whether element is larger than its viewport, which can easily be done by checking these two values:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

but that doesn't mean that it has scrollbars as well (so it can actually be scrolled by humans).


How do I check for scrollbars in a 1 cross browser and 2 javascript only (as in no jQuery) way?

Javascript only, because I need as small overhead as possible, because I'd like to write a very fast jQuery selector filter

// check for specific scrollbars

// check for ANY scrollbar

I suppose I'd have to check for
style settings but how do I do that in a cross browser way?

Additional edit

Not only
style settings. Checking whether an element has a scrollbar isn't as trivial as it seems. The first formula I've written above works fine when element doesn't have a border, but when it does (especially when border is of considerable width),
dimension can be larger than
dimension but the element can still be scrollable. We actually have to subtract borders from
dimension to get the actual scrollable viewport of the element and compare that to

For future reference

jQuery selector filter is included in my
jQuery plugin. Complete code can be found in my blog post if anybody needs it. Even though it didn't provide the actual solution Soumya's code considerably helped me solve the problem. It pointed me in the right direction.

Answer Source

Add an 100% wide element inside it. Then set overflow to hidden. If the element's computed style (from jQ) changes, the parent had a scrollbar.

EDIT: It seems you want a cross browser method like getComputedStyle. Try:

function getCSS(_elem, _style)
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download