Fresh

Recently one of our designers came by and and asked me about how much actual control we could have over the aesthetics of scrollbars. I told him what I often respond with: “If you can design it, we can build it.”

Although this statement is fundamentally true, stylizing scrollbars creates a unique set of obstacles. Since scrollbars are handled by the browser window itself and not the website, controlling their appearance and functionality becomes more work than simply using CSS to skin the elements. Fortunately, there are plenty of options out there but finding the right one for your project isn’t always easy.

Styling scrollbars with CSS

One way to start stylizing the scrollbar attributes is to use CSS. A quick cross-browser test will show you that this isn’t a viable route. Ironically (to us developers) Internet Explorer is the only browser to fully support the scrollbar attributes allowing for an easy, quick way to customize your scrollbars’ look and feel. This may have been acceptable when IE had a 90% browser market share but those days are over and let’s face it — the designers pushing for these changes all use Macs.

Even if you’re okay with the fact that the look won’t carry over to all browsers and operating systems, you are still limited to only making simple changes (like background color, arrow color, highlight effect and 3D light effects) to stylize the scrollbars that already exist. So, you’re only able to give what’s already there a different look. Usually, designers will push past this in their designs to encompass functionality, proportions and the use of graphics or imagery. These limited design options, coupled with the fact that they only work on browsers that support the IE proprietary attributes, makes this a non-solution for most projects.

The srollbar elements you can stylize with CSS (full support in IE only)

Using Flash for your scrollbars

Here’s another way to show your scrollbars some love: create custom scrollbars using Flash. This would allow you to customize every aspect of the scrollbars’ look, feel and functionality. This might satisfy the visual aspects of your goals but has one prominent drawback: the text is now in Flash which will dramatically affect the way search engines see your content. (Search engines are text-based, meant to be crawled and indexed by the various search engines; your website content should be text-based, and unfortunately Flash is not, making it less search engine friendly.)

Google and Adobe have been making big strides in this field, and now Google can crawl some Flash content. This is a big win for Rich Internet Applications like Flash! Unfortunately, this technology is in its infancy and has not been adopted by all search engines. Using Flash has some other drawbacks as well.

• Because you are using Flash you have less flexibility with resizing and making simple aesthetic changes through normal methods like CSS.
• Using flash also requires someone that knows and can develop in Flash (Flash developers can potentially charge more for development that will intern eat away at a budget and/or timeline).

Customize Scrollbars using jScrollPane

One solution we have found that appeases both the designers and the budget/timeline is jScrollPane. Using jquery as its base javascript library, jScrollPane is a plugin that allows you to replace a browser’s default scrollbar on any block level element. Once replaced you can then use simple CSS to fully customize almost all aspects of their aesthetics and further use jquery to customize functionality.

Out of the box jScrollPane offers a great deal of customization, from which side of the element the scrollbar resides to the colors used, custom images and even some functionality. Like normal scrollbars, they can be nested within each other, and (with the additional use of another plugin) users can scroll through them using the mouse wheel just like a normal webpage. Some great examples of the flexibility of jScrollPane can be found at Kelvin Lucks website.

srollbar examples using jScrollPane

Although using jScrollPane is the best solution I have found for customizing scrollbars, here are a few caveats worth mentioning:

• Because jScrollPane is a plugin to jquery, there are additional files and therefor additional HTTP requests that have to be made when the web page initially loads decreasing the speed at which your page loads. The effect should be small but could affect those with very slow internet connections.
• There’s always the possibility that a user will have javascript turned off and not see the custom scrollbars at all. This is unavoidable, however the user will still see the default scrollbars (a good example of graceful degradation).

Sometimes, as developers, graceful degradation is the best we can do. With any technology in its (relative) early beginnings, there are roadblocks to accomplishing exactly what you want. There’s almost always a way to achieve what you’d like, but sometimes it requires selecting the lesser of the coding evils to get there.

As we can see from the new technologies coming out, like the iPhone and Android (where you swipe your finger on the screen to move a web page or to move the content onto the screen) scrolling is not going anywhere. There will always  be instances when you want more content in one area than the screen allows. If you’re online this means scrollbars.  So style them, embrace them — even love them and go scrollin’ with your homies.