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.

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.

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 ;)

Customizing Scrollbar Color & Style in Storyline 360's Scrolling Panel to Match Themes

DavidKelley-54e
Community Member
11 months ago
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.
NerinaWillia581
Community Member
4 days ago
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 :-)
PaulTottle-112c
Community Member
9 days ago
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.
sebastiendau292
Community Member
4 days ago
Hello, you can customize the scrollbar color with a javascript, i think it'is possible to enlarge it too, try this example for colors.
Scrollbarcolor3.story1.8 MB
- AmyGullett-4842
  Community Member
  3 days ago
  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?
sebastiendau292
Community Member
2 days ago
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 ;)

ScrollbarcolorNew.story1.8 MB
- DavidKelley-54e
  Community Member
  2 days ago
  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.
  - AmyGullett-4842
    Community Member
    2 days ago
    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.
JoseTansengco
Staff
12 months ago
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!
- AmyGullett-4842
  Community Member
  3 days ago
  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.
AmyGullett-4842
Community Member
2 days ago
oh thank you so very much! I need to learn more javascript!