In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > scrollbarBaseColor

scrollbarBaseColor style property

Browser support:

Specifies or returns the main color of the scroll bar.

To manipulate the scrollbar displaying status, use the overflow property.

Syntax:

object.scrollbarBaseColor;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: scrollbar-base-color

Possible values:

The type of this property is string.

One of the following values:

color

The main color of the scroll bar. For the supported color values, see the colors page.

inherit

Takes the value of this property from the computed style of the parent element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the scrollbar-base-color property:

<head>
    <style>
        .newScrollBar {
            scrollbar-base-color: #A0CCE0;
            overflow: scroll;
            width: 200px;
            height: 167px;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
    <div class="newScrollBar">
        Look at the colors of the scroll-bars.<br />
        ....................................................<br />
        ....................................................<br />
        Look at the colors of the scroll-bars.<br />
        ....................................................<br />
        ....................................................<br />
        Look at the colors of the scroll-bars.<br />
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the scrollbarBaseColor property and the ChooseColorDlg method:

<head>
    <style>
        .example {
            scrollbar-3dlight-color: #4FBDDD;
            scrollbar-arrow-color: #EEE1AE;
            scrollbar-darkshadow-color: #000000;
            scrollbar-face-color: #A0CCE0;
            scrollbar-highlight-color: #F8F2DC;
            scrollbar-shadow-color: #176F99;
            scrollbar-track-color: #E7F2FA;
            overflow: scroll;
            width: 200px;
            height: 167px;
        }
    </style>

    <script type="text/javascript">
        function CallColorDlg (button){
            try {
                    // the name of the style property (scrollbar...)
                var colorAttr = button.innerHTML;
                    // the sample div element
                var sample = document.getElementById ("sample");            
                    // the init color for the color dialog
                var initColor = sample.style.getAttribute (colorAttr);

                    // calls the color dialog object
                var dlgHelper = document.getElementById ("dlgHelper");
                var selectedColor = dlgHelper.ChooseColorDlg (initColor);
                sample.style.setAttribute (colorAttr, selectedColor);
            }
            catch (e) {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
        <!-- The Dialog Helper Object for the ChooseColorDlg method -->
    <object id="dlgHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></object>
    
    <div id="sample" class="example" nowrap="nowrap">
        Change scrollbar color with <br /> the buttons below
        <br /><br />
        ....................................................
        <br /><br /><br /><br /><br /><br />
    </div>
    <div style="width: 250px; padding-top:30px;">
        <button onclick="CallColorDlg (this);">scrollbar3dLightColor</button>
        <button onclick="CallColorDlg (this);">scrollbarArrowColor</button>
        <button onclick="CallColorDlg (this);">scrollbarDarkShadowColor</button>
        <button onclick="CallColorDlg (this);">scrollbarFaceColor</button>
        <button onclick="CallColorDlg (this);">scrollbarHighlightColor</button>
        <button onclick="CallColorDlg (this);">scrollbarShadowColor</button>
        <button onclick="CallColorDlg (this);">scrollbarTrackColor</button>
    </div>
</body>