Forum Discussion
Customizing Scrollbar Color & Style in Storyline 360's Scrolling Panel to Match Themes
I'm currently working on a project in Storyline 360 and have been striving to create a cohesive and engaging design theme throughout. One element that I'd like to adjust to better align with my design is the scrolling panel's scrollbar color and style.
I've been searching for a way to customize the scrollbar so it can seamlessly match with the rest of my theme and design, but haven't found a direct solution yet.
Has anyone had experience or success in changing the color and style of the scrollbar in Storyline 360's scrolling panel? Any tips, tricks, or workarounds would be greatly appreciated!
Thanks in advance for your help and expertise!
It is sad to me as a long time user, that Articulate doesn't ever actually address these items. This has only been being asked for since like 2013. You already possess the ability as you have shown with the sliders. Perhaps Articulate could actually hire people to MAKE the changes to the program that are requested... instead of just people to respond to the requests by saying that they will "put it on the list" - which is what parents tell their kids when they usually have no intention of doing it.
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?
I agree whole heartedly! I use a marker with a down arrow icon and place the marker directly above the scroll panel to draw learners' attention to the marker. When they hover over the maker a note appears with the words 'scroll bar'. This is a tip I picked up from a previous thread a few years ago and I think it works well :-)
Being able to change the format of the scroll bar is necessary for accessibility. The thin line is too obscure. I'm using a scrolling panel once in the eLearning and I need it to be obvious.
Hello, you can customize the scrollbar color with a javascript, i think it'is possible to enlarge it too, try this example for colors.
I am unable to have it be a different color automatically without having to click something. What are your suggestions? Also, how would we change the size with javascript?
Hello Ramjeet Vishwakarma,
Thanks for reaching out!
There isn't a way to customize the default scrollbar in Storyline 360 right now, but we do have a feature request open to allow for more customization for this element. I've added your voice to the request so we can notify you when we have any new updates to share.
In the mean time, I'll let other members of the community chime in incase there is a way to modify the appearance using CSS tricks!
Thank you. I was able to modify the colors using a user click option that worked for me. However, I am still struggling with the size difference. I will post it here if/when I am able to do it.
oh thank you so very much! I need to learn more javascript!
