Custom Scrollbars with CSS

By

Web Production Manager Targus US-CA-Santa Monica Post A Job | Post A Resume

Web designers are known to be fussy about everything. They want to have control over the look of everything that goes on the website. From the height and width of the window, to the anti-aliasing of fonts, to the way buttons and scrollbars are rendered. Before CSS was introduced, you had to use images for the simplest of things like giving a border to a box, etc. Web designers dreamed of a day when they could completely customize how input fields and buttons were rendered. Customizing scrollbars was beyond their imagination.

Years passed and we moved into 2010. Following CSS 1 and 2, CSS 3 is well on its way and promises some amazing features that will appeal to web designers. Among other features, it introduces scrollable divs. While this allowed designers to design fixed height websites with the content scrolling inside a div; they now want to be able to style the scrollbar to match the look of the site. Doing this can be tricky, but the results are remarkable.

There are several implementations of custom scrollbars, but the following implementation is my favorite for the following reasons:

• It works across all popular browsers (Safari 3 and 4, Firefox 2 and 3, IE 7 and 8, Google Chrome).
• It supports the scroll wheel on the mouse.
• The HTML markup is very clean.
• The scrollbar length is proportional to the content.

An Example

Here is an example of the scrollbar at work.

How To Use It

You'll be surprised to see how easy it is to use this scrollbar. All you need to do is include a few files and then wrap the scrollable content into a div.

1.  First, you need to download and include the following javascript and CSS files: prototype.js, slider.js, scroller.js and scroll.css.

2.  Then, you add the following lines of code wherever you want the scrollbar to appear. As I mentioned earlier, you need to wrap the content into a div in the following manner:

The important part is to give the div the makeScroll class. You should specify the height and width of the div; otherwise, it will take the maximum height and width available. The inner div in the code above is optional. I use it to give some space between the scroller and the text.

Customize It

The scroller has three parts to it and the style of each of them can be customized. The parts are:

• the scroll buttons
  By default, the scroll buttons show up on either sides of the handle. If you want, you can place the buttons next to each other too. The style that I used in the above example is as follows:

Depending on the design, sometimes you don't want the scroll buttons to display. The user scrolls by dragging the scroll handle. In such cases, you add display: none !important to both classes.

• the area over which the handle slides
  The style for this is very straight forward. You define the background of the area. It could be a color or a graphic, as in the example above. If you are using a graphic, remember that it will tile vertically.

• the scroll handle
  The scroll handle is made up of three segments: handle-top, handle-bottom and the middle part of the handle. The middle part of the handle will scale up and down depending on the length of the text. The top and bottom are of fixed height. Again, depending on the design, you might want to hide the slider completely. This can be done by adding display: none !important to all three styles.

Conclusion

This implementation of the scroller is the only one that I have come across that supports the mouse scroll wheel. There were a few others that claimed to support it, but either they are much too complex to use or they don't work on all platforms. The only shortcoming with this implementation is that it doesn't support horizontal scrolling and it doesn't automatically scroll when you are selecting the text. But in most cases, you need vertical scrolling, and it does a great job of that.

Creating an ASP.NET Registration and Confirmation System Combine Ajax and JSON to Transmit Complex Presentation Data Ten Tools Web Developers Can't Live Without

A Simpler Solution for VoIP Phone Calls? Review: Dropcam Echo AMD Unleashes Six-Core Desktop CPU