JavaScript

Manipulate Scrollbar Colors Using CSS and JavaScript Article

    Mike Thompson
    Share

    The thing about the default color of scrollbars is that it’s dull and ugly — usually this color is gray. Wouldn’t it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

    Using CSS

    In CSS, simply add the below definitions to the top of your page to customize the browser’s scrollbar colors. The great thing about CSS is that browsers that don’t understand it will just skip it. Scrollbar painting is supported by IE5.5 and up.

    <style>
    <!--
    BODY{
    scrollbar-face-color:#8080FF;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-track-color:#DDDDFF;
    scrollbar-shadow-color:'';
    scrollbar-highlight-color:'';
    scrollbar-3dlight-color:'';
    scrollbar-darkshadow-Color:'';
    }

    –>
    </style>

    Bet you never realized the scrollbar consisted of that many components! The first three definitions are the most important, as they correspond to the most visible aspects of the scrollbar. Feel free to play around with the other definitions to see what they affect.

    Using JavaScript

    You can also use JavaScript to dynamically change the scrollbar color. This is useful when you wish to do something fancy, like alternating the scrollbar from one color to another. The JavaScript translation of the scrollbar CSS definitions are:

    document.body.style.scrollbarFaceColor="colorname"
    document.body.style.scrollbarArrowColor="colorname"
    document.body.style.scrollbarTrackColor="colorname"
    document.body.style.scrollbarShadowColor="colorname"
    document.body.style.scrollbarHighlightColor="colorname"
    document.body.style.scrollbar3dlightColor="colorname"
    document.body.style.scrollbarDarkshadowColor="colorname"

    Here’s an example of a “blinking” scrollbar, which changes color every second:

    <script>

    var mode=0

    function blinkscroll(){
    if (mode==0)
    document.body.style.scrollbarFaceColor=”blue”
    else
    document.body.style.scrollbarFaceColor=”green”
    mode=(mode==0)? 1 : 0
    }
    setInterval(“blinkscroll()”,1000)
    </script>

    A more elaborate example of scrollbar manipulation using JavaScript, called onMouseover Scrollbar Effect, is written by Svetlin Staev. This changes the scrollbar colors when you move your mouse over and away from it.

    I’m seeing more and more sites customize the scrollbar color to blend in with the rest of their sites. I hope you find these tips useful in helping you do the same!