Detect Whether a DOM Element Has a Visible Scrollbar
Detect Whether a DOM Element Has a Visible Scrollbar
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Webkit browsers, especially in Mac OSX, hide the scrollbar intelligently when not in use. This feature improves the look and feel of the browser. But for the designers, sometimes this can be a pain because they may need to alter the design based on the visibility of the scrollbar.
Here are two simple jQuery plugins that can detect the visibility of the scrollbar for a given DOM element:
For Horizontal Scrollbars
(function($) {
$.fn.hasHorizontalScrollBar = function() {
return this.get(0) ? this.get(0).scrollWidth > this.innerWidth() : false;
}
})(jQuery);
For Vertical Scrollbars
(function($) {
$.fn.hasVerticalScrollBar = function() {
return this.get(0) ? this.get(0).scrollHeight > this.innerheight() : false;
}
})(jQuery);
You can use it like this:
if($("#element").hasVerticalScrollbar()){
//do whatever you'd like to
}
Source and idea: this StackOverflow discussion. 
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Published at DZone with permission of Hasin Hayder , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}