August 28, 2000 - Coloring Scrollbar Arrows

August 28, 2000
Coloring Scrollbar Arrows

Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Starting from IE 5.5, you can set and modify the color of scrollbar arrows, on the fly. You set the color as follows:

object.style.scrollbarArrowColor = vColor;

where vColor is a color name or an RGB value.

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

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 red scrollbar arrows green scrollbar arrows

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.scrollbarArrowColor='red')"><FONT COLOR="red">red scrollbar arrows</FONT></A>
<A HREF="javascript:void(longWord.style.scrollbarArrowColor='green')"><FONT COLOR="green">green scrollbar arrows</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).

August 28, 2000 - Coloring Scrollbar Arrows

Find a programming school near you