Styling Scroll Bars

Recently I was working on a project at my job at Pierce Communications and decided I wanted to play about with some scroll bar functionality.

Normally we would never advocate changing default browser behaviour — it can confuse users and jar the user experience, but occasionally small changes can be fun and add to an experience.

One such change is to style the scroll bars that appear when you have overflow in your content. By default the scroll bar will appear just as the browser intended, this is because the scroll bar is part of the browser’s chrome, fortunately we can hack around this in most cases.

The first thing a lot of people would do is start looking for a jQuery plugin, and indeed there are a few out there which seem to work quite well. But I have a problem with using JavaScript for style when I shouldn’t need to and I have a big problem with introducing extra code to support just to add some visual fluff. If the design really really needed it then I would look at using a plugin, but for a little bit of visual sugar I don’t think it is worth it.

Of course even if we use a plugin, we shouldn’t rely on JavaScript to do our dirty work, so there are also some CSS we can apply, unfortunately they only work on a small amount of browsers but since this is some visual icing that is fine.

The CSS you need would be something like this;

// This will work for some versions of Internet Explorer
// and apparently Opera, although I cannot confirm this.


.myCoolDiv {
  scrollbar-face-color: #000000;
  scrollbar-shadow-color: #000000;
  scrollbar-highlight-color:#000000;
  scrollbar-3dlight-color: #000000;
  scrollbar-darkshadow-color: #000000;
  scrollbar-track-color: #D9D1AC;
  scrollbar-arrow-color: #D9D1AC;
}

// These will work for some versions of Webkit enabled browsers.

.myCoolDiv::-webkit-scrollbar {
  width: 12px;
}

.myCoolDiv::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(217, 209, 172, 0.85);
  border-radius: 10px;
}

.myCoolDiv::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(217, 209, 172, 0.85);
}

There is plenty of information available online about each of the properties for both Internet Explorer and Webkit.

Remember that with great power comes great responsibility, this should always be used with caution and always with the user experience in mind, colouring in scrollbars for the sake of it is not something we would ever do or recommend anyone do.

With that said, happy hacking!