Web Shoppe | CSS | Custom Scrollbars

Home | Coding | CSS | Custom Scrollbars

Custom Scrollbars

With the coming of CSS, scrollbars are suddenly seen as part of the web-page, rather than part of the browser. Take the scrollbars on this very page - they blend in perfectly! And this is how I did it:

<style type="text/css"><!--
body {scrollbar-face-color:#000000;
      scrollbar-shadow-color:#632984;
      scrollbar-highlight-color:#632984;
      scrollbar-3dlight-color:#130919;
      scrollbar-darkshadow-color:#130919;
      scrollbar-track-color:#130919;
      scrollbar-arrow-color:#C2A2DA}
--></style>

An easier, although less customizable, way is to just set the general color scheme, and let the highlight and shadow colors render automatically. Like so:

<style type="text/css"><!--
body {scrollbar-base-color:#632984; 
      scrollbar-arrow-color:#C2A2DA}
--></style>

Since it can be tricky picking out which color is what (like, what's the difference between shadow-color and darkshadow-color?!), here is a program that will do it all for you!

Transparent Scrollbars

Using the chroma CSS filter, you can now get a transparency or semi-transparency effect on the scrollbars of your iframes and div layers, such as the one on my free soft layout. Here is the code you'll use:

<style type="text/css"><!--
.div {filter:chroma(color=#FFFFFF);
      scrollbar-face-color:#000000;
      scrollbar-shadow-color:#632984;
      scrollbar-highlight-color:#632984;
      scrollbar-3dlight-color:#130919;
      scrollbar-darkshadow-color:#130919;
      scrollbar-track-color:#FFFFFF;
      scrollbar-arrow-color:#C2A2DA}
--></style>

See where it says filter:chroma(color=#FFFFFF)? That's where we set the color that will be transparent, so that any part of the scrollbar you set to #FFFFFF (which is white) will be transparent. It doesn't have to be #FFFFFF, you can change it to any color that you won't be using elsewhere in the page.

Once you have the above code in between your <head> and </head> tags, put class="div" allowtransparency="true" into the div or iframe tag that you want to have transparent scrollbars. So your iframe code would look like this:

<iframe name="name" src="frame.html" class="div" allowtransparency="true"></iframe>

Reverse Scrollbars

One last scrollbar trick is to baffle the viewer by placing it on the left side of the browser window. This is also done with CSS:

<style type="text/css"><!--
body {direction:rtl}
--></style>

Then place this code right after the <body> tag:

<div style="direction:ltr">

The div tag will keep all the text in your page correctly aligned. You should also put a </div> tag right before the </body> tag, just to keep all your HTML correct, although it isn't absolutely necessary.