Scrollbar styling

#1

For my crossplatform prototype, I need to hardwire the scrollbar appearance lest it be overridden by the OS the viewer’s browser runs on. Am I right in assuming that this currently requires Firefox because webkit does not support scrollbar-color:?
On Webkit the scrollbar can be targeted only via a pseudo-class ::-webkit-scrollbar-track and there is no way I can use that, correct?

#2

yes, since we do not support creation of custom CSS selectors, you have to define those in a custom <style> section in the header_include.html-file. Here a little example which uses ::webkit-scrollbar to style it.

Here an example which uses a state to change it: scrollbar.zip (328.3 KB)

I do not know how you would like to change the appearance … if it is state-based (like in the example above), you have to look up the css-selector in the browser developer tools:

image
image2558×1066 725 KB

and use it inside your style-declaration:

<!-- styling for the scrollbar: -->
<style>
/* 
👇👇👇👇👇👇👇👇👇👇👇👇 */
.D1413447520_Sid168490364l::-webkit-scrollbar {
    background: red;
}

/* state: 'blue scrollbar' */
.D1413447520_Sid1176744813l::-webkit-scrollbar {
    background: blue;
}
</style>
#3

Thank you, Felix. I will try this today.

#4

It’s working. Another problem solved. Awesome!
I wrapped the entire prototype inside a themed cell whose children also switch when I switch the skins, so I am using

.id1601889504l *::-webkit-scrollbar{
(style goes here)
}

.id1601889504l_Sid1595560258l *::-webkit-scrollbar{
(style goes here)
}

to avoid having to style individual scroll bars. I hope these classes are fairly persistent now because then I can just set this up as a template and forget about it.

Thanks so much for the ongoing help!