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
properties of the element.
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,
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
on the element). Then
returns the actual height of the element, including whatever would be hidden if
was set on the element.
I suppose that, generally,
would be equal to the current
of the element according to
(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
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 :)