I want to change the color of the scroll bar.For creating the scroll bar I used the given code.
javascript is

$('.scroll-pane').jScrollPane();


    $('#body').bind(
    'jsp-scroll-y',
    function (event, scrollPositionY, isAtTop, isAtBottom) {
        console.log('#pane1 Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
    }
);

css is

.scroll-pane
{
    width: 100%;
    height: 300px;
    overflow: auto;
}

But here I cannot change the color of the scroll bar.How can I change the color? Demo

I want to change the color of the scroll bar.For creating the scroll bar I used the given code.
javascript is

$('.scroll-pane').jScrollPane();


    $('#body').bind(
    'jsp-scroll-y',
    function (event, scrollPositionY, isAtTop, isAtBottom) {
        console.log('#pane1 Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
    }
);

css is

.scroll-pane
{
    width: 100%;
    height: 300px;
    overflow: auto;
}

But here I cannot change the color of the scroll bar.How can I change the color? Demo

• javascript
• jquery
• html
• css
• jscrollpane

Share Improve this question Follow edited Apr 9, 2013 at 13:01 Nithin Viswanathan asked Apr 9, 2013 at 11:44 Nithin ViswanathanNithin Viswanathan 3,28377 gold badges4545 silver badges8585 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

These two elements are basically the scroll bar and drag handler.

.jspTrack {
    background: lightgray !important;
}

.jspDrag {
    background: gray !important;
}

Edit: really making sure the colors get applied.

You can stylize drag element .jspDrag:

.jspDrag {
    background-color: #000;
}

and the scollbar .jspVerticalBar itself:

.jspVerticalBar {
    background-color: rgba(0,0,0,0.5);
}

UPD Working example http://jsfiddle/KVyAG/2/

This may help you. For particular class or id you can just write name of class or id instead of BODY

 <style type="text/css">
    BODY{
    scrollbar-face-color:#DFFFBF;
    scrollbar-shadow-color:green;
    }
    </style>

You can also use following property:

• 1) scrollbar-3dlight-color 2) scrollbar-arrow-color 3) scrollbar-base-color 4) scrollbar-darkshadow-color 5) scrollbar-face-color 6) scrollbar-highlight-color 7) scrollbar-shadow-color 8) scrollbar-track-color

Try this:

.scroll-pane
 {
 width: 100%;
  height: 300px;
  overflow: auto;
  background-color:#000000;
}

We can change color of scrollbar using javascript also. There are various ponents in scroll bar like base color, face color, arrow color etc that changes color of various parts of scroll bar. The following lines might help you.

document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";

Apart from the above styles, you will have scrollbarShadowColor, scrollbarHighlightColor, scrollbar3dlightColor,scrollbarDarkshadowColor etc. So, choose your ponent of scroll bar and change the color of it.