Published on: 16 March, 2016

Simple way detecting if a page has a scroll bar

Tumblr Digg Google Plus

If you try to search this particular topic in Google Search, you will come up with a list of different solutions. Most of them will use the document or body height to compare if there is a difference, we assume there will be a scroll bar. Unfortunately it doesn't work well, most of them it will return the same height. The following example of codes, I find it cannot determine if a scroll bar exists.

if(document.body.scrollHeight > document.body.clientHeight){
}

//or using JQuery to determine the scroll bar.
if ($(document).height() > $(window).height()) {
}

Solution to detect if a page has a scroll bar.

The best way to check is rather than using the height, you can actually use the width to determine this. You might realize if a scroll bar exists, a width of the document body should has been reduced to allocated the scroll bar width. So you can use the following solution to test it. Well if we think carefully, it actually doesn't make sense. But in reality it does, this is called the reversed thinking solution ;-).

if (window.innerWidth > document.body.clientWidth) {
	alert("Page has a vertical scroll bar");
}

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.