Some newer browsers allow you to change the scrollbar by color and position. Most of this is supported by the IE browser only.

There are seven parts to a scrollbar:
1. normal
2. face
3. shadow
4. highlight
5. 3dlight
6. darkshadow
7. track
8. arrow	

Using CSS, you can apply colors to the different parts like so...
<Code
  language="css"
  text={`body {
  scrollbar-face-color : #ff0000;
  scrollbar-shadow-color : #ff0000;
  scrollbar-highlight-color : #ff0000;
  scrollbar-3dlight-color : #ff0000;
  scrollbar-darkshadow-color : #ff0000;
  scrollbar-track-color : #ff0000;
  scrollbar-arrow-color : #ff0000;
}`}
/>

That example would turn the whole scrollbar red, so be sure to adjust the color codes to suit your site designs.

Considering this is "proprietary" coding, it will not validate agains the W3C structure. To create a workaround to this, you will have to use a bit of javascript.

Some sites with different languages need the scrollbar to appear on the left side of the window instead of the right side. This is possible by adding this to your css area...

<Code
  language="css"
  text={`html {direction:rtl;}`}
/>

Now that does have a small drawback in that it will turn things a bit backwards for the stuff on your webpage as well. To counter-act the effect in you normal page area, but keep the scrollbar on the left side, add one more line to your css area...

<Code
  language="css"
  text={`body {direction:ltr;}`}
/>

Learn about adding scrollbars to your website with CSS.

Scrollbars

Author

Table of Contents