Change scroll panel scroller color

Hi Jessie,

You can check out all of the options you have to format your scrolling panel in our documentation here.

You are correct Max.

I apologize for any confusion, I was sharing the documentation with Jessie.

You must still be subscribed to the conversation here Max :)

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. 

Hi, 

I agree with Max. The current scrollbar is not user-friendly and you can hardly notice it. I do not want to have to point it out to my learners - they should be able to see it. We need to be able to either control the way it looks or have more options to choose from when formatting it. 

I don's use the scrollbar to control the panel.Javascript can do anything.

http://www.znsoft8888.com:800/ceshi/%E7%AC%AC%E4%B8%89%E8%AF%BE/%E7%AC%AC%E4%B8%89%E8%AF%BE%20%E4%B8%89%E7%82%B9%E6%B0%B4%20-%20Storyline%20output/story_html5.html

Hi Mike,

Neat example and thanks for sharing! Are you able to include the .story file here for folks to take a look under the hood? That'll help if they need to recreate the same thing. 

wow. i am eager to learn how to do this

thanks

max

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:

wow!

works, thanks for sharing

m

That's a great workaround Snorre! Is it possible to apply it to the main menu scrollbar as well?

We switched from SL360 to SL3 mid-project and the default style makes me want to cry: looks so 90's and not in a good way. :/