How to Create a Custom Scrollbar

Introduction | Colored Scrollbars | Transparent Scrollbars | Reverse Scrollbars




Introduction


Custom scrollbars are becoming increasingly popular. You can use CSS to create scrollbars that match your website's layout, instead of using the dull, standard grey scrollbars. These scrollbars aren't supported by every browser just yet; so far, only Konqueror and Internet Explorer 5.5+ support them. Other browsers will simply ignore the code and use the default scrollbars. Whether or not you use custom scrollbars on your website is entirely up to you. Just be sure that you use colors that won't be a problem for the visually impaired or for those with color deficiencies.

You should also be aware that if you use W3C's CSS Validator, you will encounter an error message saying that the property does not exist. This is because custom scrollbars are not yet supported by W3C recommendations.



Create a Colored Scrollbar


The first step in making a colored scrollbar is determining what colors you will use. You will need to know the specific hex code of the color (a code that the browser will understand). You can usually use a program like Paint Shop Pro or Photoshop to find this code, but if you don't have those, there are plenty of hex code charts online. Simply search for hex code in your favorite search engine. Use the chart to the left to determine which color you want each property to be.

The next step is simply putting the hex codes into the right places in your CSS code. Copy and paste the text below onto your own page, then fill in the right colors. If you want the browser window to show the scrollbar, put your code between the <head> and </head> tags. If you want a textarea to have a colored scrollbar, put the code between the <textarea> and </textarea> tags. For an external style sheet, simply add the rules to your style sheet.

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




Create a Transparent Scrollbar


Now that you know how to create a colored scrollbar, what if you want to make one portion of it transparent? You can do exactly that using a CSS chroma filter. You will only change where it says filter:chroma(color=#000000); ... change the color to any color you want to be transparent. Now, wherever that color is used in the scrollbar, that area will be transparent. It can be any color, but it should be a color that you aren't using elsewhere on your site. Put the code between the <head> and </head> tags. 

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


Now that you have that code between your <head> and </head> tags, you need another code in the <body> of your document. You will need to put class="div" and allowtransparency="true" inside the div layer or iframe where you want the scrollbar to appear. Here is an example:

<div id="content" class="div" allowtransparency="true"></div>




Create a Reversed Scrollbar


Here's how you can place your scrollbar on the left side of the screen rather than the right side. I don't personally recommend this little trick, because it often confuses visitors! This snippet of CSS will need to be placed between your <head> and </head> tags:

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


Now, place this next snippet inside your <body> tag:

<div style="direction:ltr">