Change scroll panel scroller color

I have figured out a way to adapt the built-in scroll bar, through a small piece of javascript, that places a small style tag in the head of the html document.

Here I have changed the button to a dark aquamarine, and the background to  off-white:

$("<style type='text/css'> .scrollarea-scrollbar:before { background-color:#F7F5F6 !important;} .scrollarea-btn:after { background-color:#4D839D !important;} </style>").appendTo("head");

.scrollarea-scrollbar:before controls the bar background, while .scrollarea-btn:after controls the button. You can also control the width, border radius etc. Here is a list of the styles you can easily change:

 top: 0px;
 left: 20px;
 width: 10px;
 height: 100%;
 background: #ebebeb;
 border-radius: 5px;

Note that if you wish to change the width, you shout also change the "left" property, by the inverse amount, ie. if you wish to double the width, to 20, you should subtract 10 from the left-property. 

Here is the result of the above example:

Before:

After: