Scrollbar Coloring


Heres a javascript I use on some of my sites when I want to affect
the scrollbar color of an object (Use this to comply with W3C standards)
JavaScript Code
  1.  
  2. document.getElementById("name").style.scrollbarFaceColor = '#XXXXXX';
  3. document.getElementById("name").style.scrollbarTrackColor = '#XXXXXX';
  4. document.getElementById("name").style.scrollbarArrowColor = '#XXXXXX';
  5. document.getElementById("name").style.scrollbarShadowColor = '#XXXXXX';
  6. document.getElementById("name").style.scrollbar3dLightColor = '#XXXXXX';
  7. document.getElementById("name").style.scrollbarDarkshadowColor = '#XXXXXX';
  8. document.getElementById("name").style.scrollbarHighlightColor = '#XXXXXX';
  9.  

Where name is replace it with the elements name.
e.x. <div id="blob"></div>
so name would be blob. And the #XXXXXX is the hex value for the color.

Here is CSS to affect scrollbar coloring (wont comply with W3C standards)
JavaScript Code
  1.  
  2. scrollbar-face-color : #XXXXXX;
  3. scrollbar-track-color : #XXXXXX;
  4. scrollbar-arrow-color : #XXXXXX;
  5. scrollbar-shadow-color : #XXXXXX;
  6. scrollbar-3dlight-color : #XXXXXX;
  7. scrollbar-darkshadow-color : #XXXXXX;
  8. scrollbar-highlight-color: #XXXXXX;
  9.  

#XXXXXX is the same as above, the hex value for the color.

Image:
TutorialNinja Image
Above image cropped from https://htmlite.com/CSS011.php for example of which property affects
each part of the scrollbar.


I believe this will work in both IE and FF but right now it's only working on IE for me. And yes I got script from there but I didn't feel like using it the way they had it coded, I more use to the way I have it.
setsukemizuhara's Avatar
Views:
3,991
Rating:
There are currently no comments for this tutorial, login or register to leave one.