1. Web Design
  2. CSS

Quick Tip: Styling Scrollbars to Match Your UI Design


This tip will guide you in improving the look and feel of scrollbars to match your UI design. We'll take a look at what WebKit browsers offer us in terms of CSS, plus we'll use a jQuery fallback to cater for other browsers.

Looking for a Shortcut?

If you need help with styling a particular component of your website, it can be quicker to get help from a professional. Envato has experts ready to help with re-styling or customizing all kinds of web components

Web component services on Envato Studio

Quick Note About Browsers

When we refer to Webkit-based browsers we're essentially talking about Apple Safari and Google Chrome. Together they currently hold more than 40% of the overall desktop browser market. For tablets, Apple's iPad will always use Webkit no matter which company's browser is used. Google also added Chrome to its Android OS and Chromebooks are of course based on Google Chrome.

Looking at these figures there should be a very bright future for scrollbar styling!

Step 1: A Simple Page With Scrollbars

Before we can begin with the actual topic of styling scrollbars with CSS, we need a functional demo; a page with scrollbars. Scrollbars can be seen if:

  • Contents are larger than the visible window area (a scrollbar will appear on the right).
  • A textarea contains enough text so that scrollbars appear.
  • An iframe is used to display a different page.
  • A div or any other block element has its overflow property set.

For the sake of this demo we'll go with the last option. Here is my initial markup:

It's just a div with plenty of dummy content. And here is the initial CSS, which sets some fixed dimensions and triggers both horizontal and vertical scrollbars:

You should be able to see something similar to this:

Step 2: Starting With Webkit Browsers

Sometime back (several years) CSS Pseudo Elements were introduced in Webkit browsers to target scrollbars, presenting the opportunity to style your page according to your theme.

Let's style something, using the -webkit- prefix and webkit's custom scrollbar properties. Keep in mind that I'm sticking to just the basic CSS properties for ease of understanding, with explanation in comments.

When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. - Surfin' Safari

And now for some of the other pseudo-elements:

After adding this CSS you should be able to see the following effect (again, just Webkit browsers).

Guess what? Internet Explorer Has its Own Scrollbar Styling!

That's right - in fact IE was the first browser to ever support styling of scrollbars through CSS. This was back in the days of IE 5.5, but only the color can be changed.

These properties can still be used today; take a look at this single property on IE 9 for demonstration purposes:

See how it would look:

Step 3: Fallback for Non-Webkit Browsers

Enough about WebKit. Firefox, IE and Opera can also join in the fun. For them we have a very nice fallback approach in the form of jScrollPane. This jQuery plugin is developed by Kelvin Luck and it will be our saviour for the day.

Kelvin's website has lots of good examples, but for basic use all we need to do is download jQuery and the jScrollPane files and implement them in the following way:

Just for the purpose of matching our theme, let's open jquery.jscrollpane.css and edit the following lines with our color values (for performance improvements you may want to place all the styles within your own files):

Here is a screenshot of what you will see in Firefox:


Web Apps like Gmail and Google+ (along with many other examples) have already embraced the idea and if this momentum continues, perhaps Firefox and IE will also provide their own solutions.

I hope you enjoyed this Quick Tip and I look forward to seeing what you do with scrollbars in your design work!

Further Resources

Customizable Scrollbars on Envato Market

If you're looking for a ready-made solution, Envato Market offers a selection of scrollbars that you can plug into your website to achieve a range of effects. Here's a look at some of them:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars is an easy to use, themeable scrollbar jQuery plugin. You can implement these scrollbars just by adding a class name to to any scrollable element on your website.

Make use of the themes that are bundled with Lazybars, or create your own with some simple CSS.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress” is a plugin that can create a custom scrollbar on WordPress sites. It has a lot of customization options. You can customize color, effects, scroll delay, rail strip, and many more parameters.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar is a highly customizable custom scrollbar jQuery plugin for your WordPress website. With this plugin you can customize your webpage scrollbar, and you can embed Custom Scrollbar via shortcode anywhere you want, even in theme files.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller provides a scrollbar for your site which you can customize very easily via CSS if the three skins included are not enough. It also comes with enhanced functionality like scroll by hover or fade on mouse leave. And it works on iPhone/iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

It's easy to use the beautiful and colorful CSS3 Scrollbar for your website. Simply insert into the existing CSS file and enjoy the new CSS3 Scrollbar.

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.