ava script tutorial - a new approach by Ken J Ward

Java Script Tutorial - Changing Scrollbar Properties


The buttons below can be used to change the properties of the scrollbars on this page. For instance, clicking on the first button, using the default colour, changes the scrollbar's face-color to red. You can determine what face-color is by noting what changes colour when you click the button:-)

Some buttons appear not to work in some browsers. The code works best with IE.








The first button has the code:

<input type="button" value="face-color" onClick="changeStyle('t1')">

  So when the button is clicked, the function, changeStyle is called, with the parameter 't1'. This parameter, 't1', refers to the text box with a colour name or hex code. In the default case, this is 'red'.

The function changeStyle is shown in full below:

function changeStyle(idText) {

//first the appropriate colour is found

var myColor=document.getElementById(idText).value;

//next, the code checks which text box id was passed

//and from this, which property it should change

(idText=='t1')?document.body.style.scrollbarFaceColor=myColor:'';

//in the first case, the text box has an id of "t1", so scrollbar-face-color

// is changed

(idText=='t2')?document.body.style.scrollbarArrowColor=myColor:'';

(idText=='t3')?document.body.style.scrollbarTrackColor=myColor:'';

(idText=='t4')?document.body.style.scrollbarShadowColor=myColor:'';

(idText=='t5')?document.body.style.scrollbarHighlightColor=myColor:'';

(idText=='t6')?document.body.style.scrollbar3dlightColor=myColor:'';

(idText=='t7')?document.body.style.scrollbarDarkshadowColor=myColor:'';

}//end of changeStyle(idText);

//-->

This was was written, actually, to illustrate what these properties are dynamically.

You might also find this page on scrollbars of use.