Source code

<style>
body{
scrollbar-base-color: #C0C0C0
}
</style>
<script>
//submitted to www.a1javascripts.com
//by thomaz wiberg. Nubby@landskrona.net
function changeScrollbarColor(C){
  if (document.all){
    document.body.style.scrollbarBaseColor = C
  }   
}
</script>

<div align="center">
  <center>
  <table border="2" width="95%" cellspacing="0" cellpadding="0" bordercolor="#008000">
    <tr>
      <td width="100%" align="center"><a href="javascript:changeScrollbarColor('#FF0000')">Change to Red</a><br>
<a href="javascript:changeScrollbarColor('#FF8000')">Change to Orange</a><br>
<a href="javascript:changeScrollbarColor('#FFFF00')">Change to Yellow</a><br>
<a href="javascript:changeScrollbarColor('#00FF00')">Change to Green</a><br>
<a href="javascript:changeScrollbarColor('#4444FF')">Change to Blue<br>
        </a><br>
        <font color="#000000">
<b>
You can also, of course, call the code from any mouse event;
for instance, try sliding your mouse over this, also from our page above, for an interesting effect:</b></font>
        <p><a href="#" onMouseOver="changeScrollbarColor('#FF0000')">Change to Red</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#FF8000')">Change to Orange</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#FFFF00')">Change to Yellow</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#00FF00')">Change to Green</a><br>
<a href="#" onMouseOver="changeScrollbarColor('#4444FF')">Change to Blue</a><br>
        </p>
</td>
    </tr>
  </table>
  </center>
</div>