I think the simple solution is adding a "light/dark" setting for browsers. We certainly don't need every color of the rainbow (omg gross), but this simple option could be universal and solve most requests.
I don't think anyone who wants this wants to change the color. They want to change the shape (border-radius), or make the scrollbar "flat" (no 3D "groove" border), or translucent, or thinner, or etc. etc. etc.
A pro designer isn't going to ask for any of those things (but bad clients will). There's no reason to confuse users with unique UI designs per page. That's just bad UX.
Actually, that would not solve the issue that led me to offer the bounty.
Check out the difference between the scrollbars in Webflow rendered across Webkit (Safari, Chrome, Opera) and Firefox: https://cloudup.com/c8K9RMqPeDn
Note that not only does Webkit give you control over colors, it gives you control over the width/height of the scrollbar - which for us is critically important.
I understand what you're asking for, but when available those settings are usually set by the user, not the webpage.
Customization is a very, very slippery slope: can the web page only customize the slider? What about the tab? Why not the entire frame of the browser? The drop shadow of the window? Opacity? Alpha mask? Why just the sliders? Why not just the tab? Ahhhh....
If the web page can change the style, can the user have a setting to override it? If you make a custom style, will M$, Apple, iOS, or Android influence your design in a particular direction (i.e. ends up looking like something ported from iOS)? Or will you custom design for each system? Like, Blackberry? Or just the popular systems?
BTW - I did HD Widgets for Android. Tons of customization. A lot of it was barely used by our users. Sometimes I wish I had kept it much, much simpler. App updates can be hell...
> Customization is a very, very slippery slope: can the web page only customize the slider?
I can't believe what I'm reading. Honest question: Have you ever used css?
The scrollbar is one of extremely few elements living inside the browser frame which cannot be styled.
The scrollbar on the outside of the page doesn't matter. What matters is all the scrollbars that appear when you deal with iframes, scrolling divs etc.
For app builders, when scrollbar styling is not available, what do you think they do? They don't give up, they just implement scrolling in js instead, and accessibility/usability suffers.
Better yet, the browsers should easily be able to predict the dominant color of the page by parsing the CSS file and most of the DOM, and pick a complimentary scrollbar contrast accordingly. Maybe do that and allow override to light/dark.
Or, just allow the element to be styled like every other thing on the page. Because...why not again? Imaginary 4th wall that the bar is the only thing on the page that should not be stylable? So that it can match the scroll bars of native applications?
You think users want their browser text to change color / shape / width per web page?
Page scroll is not the only place scrollbars are useful. If you have an overflowing div in the middle of the page, a fat white/grey scrollbar is confusing.
The reason I said only light / dark is that it's easy for users to understand. Remember: these guys are asking to change the UI of the browser on a per web page basis. That kind of customization doesn't help anyone.
