Forum Discussion
Customizing Scrollbar Color & Style in Storyline 360's Scrolling Panel to Match Themes
Hello, now, the example work without click in slide, you can change the width of the scroll bar, this take 1s to load the plugin, just apply this javascript at start of the module before a slide with a scrollbar ;)
I've used similar scripts to do this as well. But this one is nice and clean. If you add a width to the .scrollarea-btn:after styles, you can make the button area larger or smaller than the track.
Just wondering if you have any scripts, you wouldn't mind sharing? I am not very familiar with JavaScript, but I can usually manipulate and implement it.
This is a great solution. Is there a way to make the scrollbar responsive? If we have a scrollbar width at 30px for web, when viewing in mobile, the scrollbar is far too wide. Any advice?
Thanks, what a great solution. While experimenting with this I noticed the button area changes color when the mouse pointer hovers over it and while using the button to scroll. In my case the button turns dark gray. Is there any way to control the color of the button when it is in use? Thoughts? Thanks!
I find the same.
While not being an expert in JS or CSS, I guess you need to know what object class the "mouseover state" of the button is in the CSS of Storyline, then you can change that as well.
I haven't had time to find that out (yet). Wouldn't it be great if there was a place here in the forum to collect all the cool JS solutions people post here?
Hi FelixFranke,
In fact, we have a dedicated space for JavaScript discussions here. You'll find more focused discussions there, as well as some examples shared by community members. Thanks for your help in growing this community!
Hi,
sebastiendau292 and for everyone else who lands here like I did looking for this function:
This javascript does not seem to work with the latest version of Storyline. I have redownloaded the example file provided and the code no longer functions. Which is really annoying as when it was working, it was great.Try this code instead. It doesn’t rely on jQuery and uses plain JavaScript.
(function addCustomStyles() { const style = document.createElement('style'); style.textContent = ` .scrollarea-scrollbar { --scroll-width: 20px !important; } .scrollarea-scrollbar:before { background: #404040 !important; } .scrollarea-btn:after { background: #00FFDA !important; transition: background 0.2s ease; } .high-contrast-scroll.scrollarea-scrollbar:hover .scrollarea-btn:after,.high-contrast-scroll.scrollarea-scrollbar.highlight-scrollbar .scrollarea-btn:after { background: #00CCB0 !important; } `; document.head.appendChild(style); })();
