Blog (view all)

Recently we had a client request the control of how the scrollbars display in the content of their website. At first, remembering back in some old school styling days, I thought we could just use CSS to control it. After that I figured there would be some jQuery that could do the trick. What I found was that this feature is more complicated than I first expected. 

I found 2 promising options at plugins.jquery.com - Scrollbar Paper, and jScrollPane. jScrollPane had 20 votes to Scrollbar Paper's 1, so I went with jScrollPane. jScrollPane gives you a div for each element of the scrollbar, so this is very flexible for your design.

To install it, go to http://code.google.com/p/jscrollpane/source/checkout to get the latest version and download the plugin. I recommend downloading the demo so you can see a working version of the plugin and use that as a reference. It also includes some other files, particularly the mousewheel file to help the functionality of your scrollbar.

In my theme's .info file (in my Drupal installation), I added the 4 .js files (minus the jquery-1.2.6 file since I wanted to use the jQuery in my drupal installation). I then moved to my script.js file that was already in my theme to make my changes to the script. There is just 1 function that you need to add to this file. You can also adjust the width of your scrollbar here or in !important overrides in your CSS.

$('#YourID.OrClass').jScrollPane({scrollbarWidth:20, scrollbarMargin:10});

This tells jScrollPane which divs to apply the scrollbar to. In the CSS I set the height of the #YourID.OrClass div and the jQuery will figure out the scrollbar size according to the size you set.

From there it is a matter of adding styles from the demo folders or configuring the scrollbar in your CSS. I would recommend copying the jScrollPane.css file from the demo to your theme as well. 

Because each of the up/down arrows, track, and slider elements are divs, it is very flexible and easy to utilize .png files in your scrollbars as well.

If you have found this post useful, or have created custom scrollbars as well, share your designs!