August 30, 2000 - Coloring the Scrollbar's Dark Shadows | WebReference

August 30, 2000 - Coloring the Scrollbar's Dark Shadows

Yehuda Shiran August 30, 2000
Coloring the Scrollbar's Dark Shadows
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Starting from IE 5.5, you can set and modify the color of the scrollbar's dark shadows. A scrollbar has two types of shadows: light shadow and dark shadow. The light shadow is on the top and left sides of the scrollbar elements (scroll box and scroll arrow buttons). The dark shadow is on the bottom and right sides of the scrollbar elements. You set the color as follows:

object.style.scrollbarDarkShadowColor = vColor;

where vColor is a color name or an RGB value.

The following TEXTAREA demonstrates the scrollbarDarkShadowColor property (works only in IE 5.5 and up). Click one of the two links to the right of the window, and color the dark shadows either red or green:

red dark shadows green dark shadows

Here is how we defined the above TEXTAREA and links:

<TEXTAREA ID="longWord" ROWS="5">
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long 
Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long
Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line 
</TEXTAREA>
<A HREF="javascript:void(longWord.style.scrollbarDarkShadowColor='red')"><FONT COLOR="red">red dark shadows</FONT></A>
<A HREF="javascript:void(longWord.style.scrollbarDarkShadowColor='green')"><FONT COLOR="green">green dark shadows</FONT></A>

Notice the usage of void() above. It is necessary to avoid overwriting of the page with the return value from the javascript: call, which is the property assignment value (red or green).