Styling Scrollable Areas

Published
September 28, 2008
by
Chris Coyier

The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself.

The desire to customize the style of these scrollbars is strong. When you are starting out, it feels like something you should be able to do with CSS. Complicating the issue, if you search around for CSS to change/customize scrollbars, you'll probably find it. The problem is that in IE 5.5, there was proprietary browser extensions to change the look of your scrollbars with attributes like "scrollbar-face-color". IE 5.5 is long gone, and the concept of allowing that control is CSS is gone with it.

There are situations though, where you will strongly wish you had control over the look of a scrollbar. For instance, when the scrollbar isn't for the entire browser window. You have a small section on your page that you need to control the height of, but contains content which overflows the container. You may set the overflow of that container to "auto", and get your default scrollbar. Depending on the design of the site, this scrollbar may look awkward and not at all desirable.

Fortunately, we can harness the amazing powers of JavaScript to solve this problem and give us complete design control over our scrollbars again. The basic theory is that we wrap the scrollable area in a new element with HIDDEN overflow, then we remove the overflow from the inside element letting it be as tall as it needs to be. Then we add a scrollbar of our own devise and watch for mouse events on it. As we drag it up and down, it adjusts the relative top value of the inside container, replicating perfectly the scrolling.

To make things easier on ourselves, we'll use an already-existing jQuery plugin: jScrollPane.

Step 1: The Markup

The only reason we have a pagewrap here is because we are centering our little scrollable area. Since the plugin will wrap that div with a class of "scroll-pane" in another div, any centering we apply to it will just center it inside that new wrap, not to the body itself. So rather than mess with that, we'll just wrap it again in a page-wrap to do our basic positioning and centering. We can also apply relative positioning to that wrap, which will allow us to place the shadow graphic inside it and absolutely position it exactly where we want it on the bottom.

We covered most of the theory here already. Of interest is the jScrollPaneTrack and jScrollPaneDrag. This is where you get you control over what the scrollbar and scroll handle look like. I've applied a rather ragged looking line as the track and a small ragged ball as the handle.

Step 3: Activating JavaScript

Typical plugin activation here. Include jQuery on your page, then the plugin, then call the plugins new function with the parameters you need. In our case, the ball is 12px wide, so we need to specify that when calling the function. That's just how this function rolls.

Step 4: Considering Usability and Accessibility

When you remove the standard scrollbar in this manner, you are taking away consistency and convention from users. People become so used to user interface conventions like scrollbars that they might gloss right over your customized one not even recognizing it as a scrollbar. That is obviously a problem. You should be darn sure that your scrollbar strongly reads as a scrollbar if you want people to actually use it (the example in this article could be dramatically improved in this regard). I certainly don't worship Jakob Nielsen (especially his god-awful website), but he has a pretty good article on scrollbar standards and what works and what doesn't when it comes to custom ones.

Also be aware the standard scrollbars come with some accessibility built in that your new custom ones won't. Mostly, this plugin approach is solid. With JavaScript off, you'll just get regular scrollbars. With CSS off, you'll see all your content just fine. With both turned on, you'll get your snazzy new scrollbar, but you will lose the ability to scroll down that area using conventional methods (like the scrolling wheel on your mouse).

Just take all of this into consideration before going with a custom approach. I think it can be the right answer in many design situations where an operating system standard scrollbar can ruin a design.

I’m a great believer in giving content space to breathe. If it doesn’t fit in it’s container on a page then it should probably have it’s own page.

Chris, I have a tenuously related question. I usually visit this site using FF on the mac, if I scroll down a page, hit a link, go somewhere else and then click the back button I am always returned to the top of the page regardless of where I was before. But Safari never fails to bring me back to the point on the page where I originally clicked the link. I don’t think the problem is entirely FF because it doesn’t happen on other sites. If you have any idea why this might be I would love to know.

You obviously know the serious usability loss in using your own scroll-bars as such. For this reason, I won’t even consider changing scroll bars. If the project requires me to do so, the project needs to be changed.

Nice article and something I would have considered years ago when changing the scroll bars was “cool”! But now I definitely wouldn’t consider changing them, to me it always looks tacky to have the main scrollbar changed, and as Mike said, the content should have its own page if its container needs a scroll!

While you say that Browsers don’t generally style the scroll box, in my version of Firefox, the scroll bars are black. I’m using a custom theme for it – NightLaunch i believe and that seems to control the scroll bars’ styling.

This may be an exception to your statement but if there is a way for doing it through a browser theme which is mainly made up of CSS, then surely there is a way to change the styling for scroll bars with browser proprietary styles?

Just a thought anyway, what do you guys think?

by the way, yet another great post Chris, very informative. I’ll hopefully get around to applying this on some new designs!

Due to the reasons of accessibility ill rather stick with the normal un skinned scrollbar.. I believe its part of the browser skin. And we as web developers have nothing do with that part. If we would, we would have become theme developers..

It’s a real shame there’s no real (as in, no javascript, and with scrolling working) way of doing this via CSS. I believe there is in IE6, using scrollbar-base-color etc though, but that’s no good these days. They’re probably trying to keep scrollbars as uniform as possible, but I think it’d be better to allow people to customize them (just two images really, background and bar).

I don’t think it’s some great sin to co-opt the scroll bar style, especially when one considers the differing widths of the OSX and XP scrollbars (not to mention any other OS). If you’ve got a scrollbar inside the body of your website, an OS default scrollbar can be downright garish. I do agree that I wish there was a CSS-only way of doing this, though.

However, while I’d love to use this trick, I tend to use MooTools more than jQuery. MooScroll performs the same scroll-swapping trick. If anyone else has similar framework preferences, I’d recommend checking it out; I’ve wanted to use it for a while, and finally have a website I can play with it on. :)

@Jackie, because most of us earn a living developing sites for clients who have a product/service to sell. Many of these “rules” are here for good reason. The more difficult you make a site to use for someone, the more quickly your chance of getting a conversion diminishes. The user stops focussing on the content and the message and becomes distracted by the interface.

I can think of very few reasons where I’d be willing to change the scroll bars on a site. In most cases I’m loathe to have them anywhere other than flush hard against the right hand edge of the window.

Its fine to have a “plain” scrollbar in the browser window itself, why would you want to change the look of a users browser? Its intrusive, annoying, and people just don’t like it. Why do you think MS dropped it from IE?

However, it makes sense to change the scrollbar if there is a scrollable container inside of your website. You would definitely want it to blend into your website for branding sake. Nothing is worse than having weird looking colors that don’t mesh well with yours placed into your website that you spent weeks designing and coding.

This is nice, but another way to do it is use mootools and the UvumiTools scrollbar plugin. No mucking around in javascript and the mousewheel works out of the box without having to add extra scripts. Plus, its good for people that use other frameworks.

Conversely, you could just drop scrollable containers altogether, but I realize that in some websites it is necessary.

A few days ago, I noticed a site had used this very technique to customize the scrollbar. It was the first time I’d really noticed that it could be done with CSS and JS.

But the novelty wore off after about 2 seconds and I found myself increasingly annoyed with it because my scrolling wheel on my mouse did not work with it.

I think it’s good for the option to be available, but I am very strongly opposed to it being used on any site that wants my respect. I believe that it’s important for scrollbars as well as form elements to closely match those of the user’s operating system. It’s for that reason that I try to keep modifications to a minimum. The average user can more easily identify elements that are familiar. Design is very important but so is usability.

I’m in no way criticizing you for posting this, I’m just making a general statement that websites should conform to certain standards.

But I’m very appreciative that you posted this script, because I was curious to peek under the hood just to see how it was done. Thanks for that.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.