Manipulating scrollbar colors using CSS and JavaScript

Introduction

The thing about the default color of scrollbars is that it's dull and ugly. Usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily Cascading Style sheets and JavaScript can be used to do just that!

Using CSS

In CSS, you would just add this code to the top of your page to customize the browser's scrollbar colors: The great thing about CSS is that browsers that don't understand it will just skip it, in this case, Netscape browsers.

<style>
<!--
BODY{
scrollbar-face-color:#8080FF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#DDDDFF;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style>

Play around with the different values!

Using JavaScript

I can use JavaScript to dynamically change the scrollbar color. This is useful when I wish to do something more fancy, like alternating the scrollbar from one color to another. The code required is:

document.body.style.scrollbarFaceColor="colorname"
document.body.style.scrollbarArrowColor="colorname"
document.body.style.scrollbarTrackColor="colorname"
document.body.style.scrollbarShadowColor="colorname"
document.body.style.scrollbarHighlightColor="colorname"
document.body.style.scrollbar3dlightColor="colorname"
document.body.style.scrollbarDarkshadowColor="colorname"

A very good demonstration of this is a script written by Svetlin Staev, which changes the scrollbar colors when you move your mouse over and out of it: http://www.dynamicdrive.com/dynamicindex11/scrolleffect.htm

I'm seeing more and more sites customize the scrollbar color to blend in with the rest of their sites. Hope you find this tutorial useful in helping you do the same!