CODEWITHSUNDEEP
javascriptjqueryhtmlcssjscrollpane
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to change the color of scrollbar?

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

Upvotes: 1

Views: 2331

Answers (5)

VAMSHI PAIDIMARRI
VAMSHI PAIDIMARRI

Reputation: 246

We can change color of scrollbar using javascript also. There are various components 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 component of scroll bar and change the color of it.

Upvotes: 0

Paul Rumkin
Paul Rumkin

Reputation: 6873

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.net/KVyAG/2/

Upvotes: 2

Seimen
Seimen

Reputation: 7250

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.

Upvotes: 4

Butani Vijay
Butani Vijay

Reputation: 4239

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

Upvotes: 1

PraJen
PraJen

Reputation: 606

Try this:

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

Upvotes: 0

Related Questions