Change scroll panel scroller color

Aug 24, 2012

Hello Heroes,

Is there a way to change the scroll bar color? Not the background color of the box that you put objects in, but the actual scroll bar itself?


57 Replies
Jessie Bernal

Hi Leslie -

Thank you for writing back. I think what I'm asking for and probably the community is to change the scrollbar itself, the part the user must click on to drag the text up or down. When we use the formatting suggestions you've sent, it does not change that area. It created a border outline of the entire scroll box (see attached). I've circled the section which I'm referring to.

The orange shape style is not useful, I want the grey scroll bar to be larger and also a different color. Can you send direction for that? 


Leslie McKerchie

Thanks for confirming Jessie.

We have an open feature request specific to updating the scrollbar color in the HTML5 output.

I'm adding this conversation to the report so that we can track the user requests and update you here if we can.

I wanted to share some information about how we manage these feature requests as that may be helpful. 

Snorre Rubin

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:

scrollbar before

scrollbar after

Snorre Rubin

Here is an example code to double the width:

$("<style type='text/css'> .scrollarea-scrollbar:before { left: 10px !important; width: 20px !important; border-radius: 0px !important;} .scrollarea-btn:after { left: 10px !important; width: 20px !important; border-radius: 10px !important;} </style>").appendTo("head");

Note that each style rule needs !important after it. Also you should set the border radius to be the same as the width, to make it look pretty. Or to zero, for a square look. Finally you need to subtract the same number of pixels from the left property, as you add to the width property, when making it wider, and vice versa when making it narrower. 

I have added a story file for your enjoyment.

Snorre Rubin

Hi it seems that with the newest version of storyline, the dom structure has changed a bit. So now the needed code is actually a lot simpler:
On the slide where the scrolling panel is:


you just change the color code to the one you want. This example is black.

first aesir

I actually have foud a workaround for this, and its very simple. Just use the slider, ad a couple of boxes as layers, ad a main text and give it 3 stances. In each one, just move the text up and made the slider go to each of them. I attach the example in SL3.

The slider lets you, in the format options of the main manu in SL, adjust it color, shape, etc. Both for the thumb and the scroll section.

Snorre Rubin

You create at javascript trigger. 


Note that you should check if your lms runs jQuery (it is fairly normal, but not guaranteed). Otherwise you need the following code, before the other one:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '';