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 desi...
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);
})();
Great!