Detect scrollbars

2011-07-03

This is an easy hack to detect whether there's a scrollbar present in some element. It's actually a really easy trick but for some reason the browser simply doesn't expose an api for it (although, I suppose, you could pull it off with one of the new css3 pseudo-selectors, but this trick has more backwards compatibility).

The trick is to compare the scroll size to the viewport size of the element. Note that the viewport size is different from the virtual size and can be found in the client* properties of the element.

Code: (js)
if (el.scrollHeight > el.clientHeight) console.log("has vertical scroll bar");
if (el.scrollWidth > el.clientWidth) console.log("has horizontal scroll bar");

In case you're wondering, clientWidth returns the width of the viewport (the part of the element that's actually shown on the page, so what would not be hidden if you'd set overflow:hidden on the element). Then scrollHeight returns the actual height of the element, including whatever would be hidden if overflow:hidden was set on the element.

I suppose that, generally, scrollHeight would be equal to the current height of the element according to currentStyle (but I may be wrong there... I haven't really read the spec on them).

Note that this won't help you if you actually do have overflow:hidden set on it. Since in that case, the scrollbars will never appear. You're on your own there, cowboy.

Here's an extensive list of css3 pseudo selectors in webkit which you can use to style scrollbars: http://css-tricks.com/9130-custom-scrollbars-in-webkit/

Hope it helps you :)