Over a million developers have joined DZone.

Detect Whether a DOM Element Has a Visible Scrollbar

DZone's Guide to

Detect Whether a DOM Element Has a Visible Scrollbar

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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;

For Vertical Scrollbars

(function($) {
	$.fn.hasVerticalScrollBar = function() {
		return this.get(0) ? this.get(0).scrollHeight > this.innerheight() : false;

You can use it like this:

	//do whatever you'd like to

Source and idea: this StackOverflow discussion. :)

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!


Published at DZone with permission of Hasin Hayder, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}