Webkit browsers, specially in Mac osx hides the scrollbar intelligently when not in use. This feature improves the look-n-feel. But for the designers, sometime this can be a pain because they may need to alter the designs based on the visibility of scrollbar.

Here goes two simple jQuery plugin which can detect the visibility of scrollbar for a given DOM element

For Horizontal Scrollbar
[sourcecode language=”javascript”]
(function($) {
$.fn.hasHorizontalScrollBar = function() {
return this.get(0) ? this.get(0).scrollWidth > this.innerWidth() : false;
}
})(jQuery);
[/sourcecode]

For Vertical Scrollbar
[sourcecode language=”javascript”]
(function($) {
$.fn.hasVerticalScrollBar = function() {
return this.get(0) ? this.get(0).scrollHeight > this.innerheight() : false;
}
})(jQuery);
[/sourcecode]

You can later use it like this
[sourcecode language=”javascript”]
if($("#element").hasVerticalScrollbar()){
//do whatever you’d like to
}
[/sourcecode]

Source & Idea: This SO Discussion 🙂