Scrollbar Coloring

Name: Scrollbar Coloring
Rating: 1 (1 reviews)
Author: setsukemizuhara

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

document.getElementById("name").style.scrollbarFaceColor = '#XXXXXX';
document.getElementById("name").style.scrollbarTrackColor = '#XXXXXX';
document.getElementById("name").style.scrollbarArrowColor = '#XXXXXX';
document.getElementById("name").style.scrollbarShadowColor = '#XXXXXX';
document.getElementById("name").style.scrollbar3dLightColor = '#XXXXXX';
document.getElementById("name").style.scrollbarDarkshadowColor = '#XXXXXX';
document.getElementById("name").style.scrollbarHighlightColor = '#XXXXXX';

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

scrollbar-face-color : #XXXXXX;
scrollbar-track-color : #XXXXXX;
scrollbar-arrow-color : #XXXXXX;
scrollbar-shadow-color : #XXXXXX;
scrollbar-3dlight-color : #XXXXXX;
scrollbar-darkshadow-color : #XXXXXX;
scrollbar-highlight-color: #XXXXXX;

#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.

Author:

setsukemizuhara

Views:

3,991

Rating:

There are currently no comments for this tutorial, login or register to leave one.