Detect Scrollbars Presence

• Download detect_scrollbars_div.zip - 1.5 KB

Introduction

This javascript will help you to detect presence of scrollbars (either x or y or both) for a div tag. Just pass the parameters (div Id and Aces i.e. which side of scrollbar x or y or both you want to detect) to the javascript function and you will know whether the scroll bar exist or not. The second parameter (Aces) is optional, you can leave this blank if you are not sure which scrollbar could exist and you want to detect whichever (x or y) scrollbar is exist. The attached sample file detect_scrollbars_div.aspx will show few examples. This javascript was only tested on Microsoft Internet Explorer version 6.0 in VWD 2005 Express Edition environment. This is a free javascript distributed in the hope that it will be useful but without any warranty.

Background

I wanted to show customized scrollbars left/right buttons if the scrollbars exist. The reason of showing the customized scrollbars buttons is that my div has a limited size and show dynamic contents. In some case the contents are wider than the division width. If I show the standard scrollbar (overflow:auto) that mess up my div look. Another reason is that I only wanted to show the customized scrollbars left/right buttons only if the scrollbar is presence otherwse the customized left/right buttons also disappear. Therefore I wrote this simple and show javascript to detect if the scrollbar is exist, if yes then the customized scrollbar buttons appear.

Using the code

The javascript is very simple and straight forward. Looking at the code you will know how to use it. Simply pass the parameters div.id and which side of scrollbar you want to check. If you are not sure which scrollbar could exist just pass the div.id to the javascript function.

Points of Interest

Cool and simple coding.

History

Created by: Muhammad Shoaib

Created on: 18 Sept 2007