Published on: 16 March, 2016

Simple way detecting if a page has a scroll bar

Posted by andy | 1018 views 0 likes 0 favourites 0 comments
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");

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 06 January, 2018
In this tutorial, you will learn how to minify JS and CSS files using Gulp. So what is exactly a Gulp is? Gulp is a javascript task runner, it can be used to perform an automatic tasks such as minifying and bundling files, running unit tests, running code analysis and much more.
Published on: 20 June, 2016
Google Analytics is one of the best free analytics site tracker. It gives you an idea the statistic of your visitors like the country they come from, the URL or keyword they search to go to your site or even the demographic or ages of your visitors. If you are a developer, you definitely do not want to track any data when you are in development phase. In this tutorial, you will learn how to disable google analytics for local development by using a javascript code if condition.
Published on: 13 May, 2016
To convert a number value into money format in Javascript can be done easily using Javascript. Firstly you will need to use the built in toFixed function that will return a number value into two decimal point and then using a regular expression to reformat the value.
Related Tutorials