Scroll Bars

I've found that most users don't like scrollbars all that much. Neither do I really, most of us would rather click and go from page to page, but scrollbars are part of the Web and differing screen sizes make it impossible to never attain a scroll bar at some point.

I came accross a few sites on the web that had coloured scroll bars and had often wondered how it was done. So i went hunting and found the code.

What's great these commands is that they work on browsers that understand them, IE 5.5 and above only at the moment though.

Furthermore, regarding these commands is that they do not just affect the main browser scroll, but any scroll that appears through form elements or iframe tags.

Also, setting the main command to the same color as the background of your page so that the scroll basically disappears except for the little button the user moves up and down.

And finaly, if you choose to you can control the colour of each scroll on your page.

CODE EXAMPLE

<style type="text/css">
 body {
      scrollbar-arrow-color: #FF0000;
      scrollbar-3dlight-color: #000000;
      scrollbar-highlight-color: #6E6650;
      scrollbar-face-color: #000000;
      scrollbar-shadow-color: #6E6650;
      scrollbar-darkshadow-color: #000000;
      scrollbar-track-color: #111111;
}
</style>			
			

View Example here.

You can control every part of your scroll bar with these style commands and make it blend into your page and look as cool you want.

TEXT AREA SCROLL BARS

As I mentioned before, you can also control individual scroll bars with inline styles like this code example below.

<form>
 <textarea cols="10" rows="10" style=" 
 scrollbar-track-color: pink; 
 scrollbar-darkshadow-color: green; 
 scrollbar-3dlight-color: lightblue; 
 scrollbar-face-color: pink; 
 scrollbar-base-color:pink; 
 scrollbar-arrow-color:purple; 
 scrollbar-darkshadow-Color: blue; ">
  I am just putting this text in here to make a scroll 
  bar appear in the textarea box!
 </textarea>
</form>			
			

View Here to see an example.

I changed up the colors a little to show that, as with all CSS commands, the commands closest to the element win. That's why the inline commands in the Textarea box overrode the commands that altered the main scroll on the far right. If I didn't override the main commands the colors would have simply been transferred to the Textarea box.

SCROLL BAR COLOUR RULES

1. Chances are if your NOT using Internet Explorer to view this you wont see the coloured scroll bars. I personally tested these codes on NETSCAPE 7.1, OPREA 7.50 & FIREFOX 1.0 and they currently are not supported.

2. Changes will NOT appear if you have a DOCTYPE declaration in the top of your web document.

So thats all there is to colouring your scroll bar. Pretty Cool hey! And just one last thing.

SOFTWARE

Cool Scroll Bars Free Utility that enables you to view what your scroll bar looks like before it generates the code for you.