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?

Jesse

57 Replies
Snorre Rubin

As mentioned above, you need to add a custom style rule the the DOM-header. 

That is done through this code: 

$("<style type='text/css'> INSIDE STYLE RULES HERE </style>").appendTo("head");

If you want to change the color of the scrollbar thumb:
.scrollarea-btn:after {background: #000 !important; /* or a color of your choice */}

If you want to change the color of the scrollbar itself:
 .scrollarea-scrollbar:before { background-color:#fff!important; /* or a color of your choice */ }

This code doubles the width of the scrollbar:
.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;} 

max maizels

hi
thank you so much for helping to educate me on javascript.... i would love
to explore this tool. i think it could be like magic.
when i attempted to follow information below, i did not see any
difference. it is clear to me i have a code error
attached is the story file -1- sliide and notes table contain free script.
naturally the triggers also contains the script.
all your help is appreciated
max

max maizels

dear snorre

thanks for you help

i am not sure how to get this to you, so hoping this works

from prev email, now with file attached

hi
thank you so much for helping to educate me on javascript.... i would love to explore this tool. i think it could be like magic.
when i attempted to follow information below, i did not see any difference. it is clear to me i have a code error
attached is the story file -1- sliide and notes table contain free script. naturally the triggers also contains the script.
all your help is appreciated
max

Snorre Rubin

Alright, I see the mistake. You wouldn't notice if you don't know javascript. Your first script looks like this:

$("<style type='text/css'> INSIDE STYLE RULES HERE </style>").appendTo("head");

.scrollarea-scrollbar:before { background-color:#FF0000!important; }

Should look like this:

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

Same goes for the second. And you might as well have them both at once:

$("<style type='text/css'>.scrollarea-scrollbar:before { background-color:#FF0000!important; } .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");

A final piece of advice: make sure that you have jquery available in the browser. Many LMS' run jQuery as a standard, but it is not a given. If you test the course locally, you will not have jQuery in the browser, and should add it. The following code can check if jQuery is present. 

if (typeof window.jQuery == "undefined") { 
   var head = document.head;
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'https://code.jquery.com/jquery-3.6.0.js';  
   head.appendChild(script);
};

You can add this as a separate javascript trigger, to run before the other script. To make completely sure that it has time to run, set this first one to run on timeline start, and the other script to run when timeline reaches 0.25 s. 

max maizels

hi Snorre
you are a magician
the code worked when a .25 sec delay was provided in the slide...
looks great

if you are interested i have figured out a work flow (not java or any of
those other scripts, but would love to know if possible) for nesting -1-
storyline inside another. doing this as a web object requires opening up a
new browser window, which if the e-learning your are providing contains
many such contents.
happy to share if you would like
thanks again..... it seems this question had been lingering in the
community for a few years....thanks for providing assistance to solve
max