Change scroll panel scroller color

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? 

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:

looks like you figured out something important
but, would you please explain where the modifying script goes so as to
improve the articulate scroll bar
thanks
max

Sure thing. I simply put the script to trigger on timeline start, on the page where scroll panel is.

yes!
i could change color!
but, i attempted to make wider (20px) and narrower ?page as you suggested
with no luck.
this is a great feature!
m

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.

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. :/ 

Actually I have no idea. I haven't used the main menu at all for a long time. Do you have a course that is available vor viewing, in html5? I'd be happy to take a quick look.

I see. Well, I'm not sure whether it's a) possible and b) a good idea to poke at the player code. Anyhow, I'm not competent enough to tell either, so if you can help with that, it would be great. Which file do you need exactly? Do you mean the story.html5? 

HI,

I have downloaded your story and published it but the buttons don't change the state of the scrollbar. Maybe I missed something? Thank you

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:

$('.scrollarea-btn-after').css('background','#000') 

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

Has anyone figured out how to change/edit the actual scroll bar yet? 

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.

I find that putting some fill color behind the text and widening the line around the scrolling panel makes the slider stand out and be easier to see and use.

Rookie here.  How do you find the place to insert that code?  Thanks!

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 = 'https://code.jquery.com/jquery-3.6.0.min.js';
 document.head.appendChild(script);

This is getting very clear. I would just require the JavaScript
Please
Max