“We would be willing to set up a $2,500 bounty to implement scrollbar styling”
bugzilla.mozilla.org
bugzilla.mozilla.org
Then, as the years crept ever forward, I began to realize this isn't a blast from the past...it's not like a discussion about the blink tag. It's a real thing that people still actually give a shit about 14 years later! My whole perspective on the thread changed.
I'm just gonna say that I have never once, in my entire 20+ years of building things on the web, wanted to change the color of the browser scroll bar. Until I read this thread I wouldn't have even realized someone would want to change the scroll bar. It seems like such an odd thing to do, and I'm imagining it looking silly, like something out of a 2001 page design (but maybe it doesn't look silly when done well).
But, I'm not a designer. Maybe I just don't get it. Either way, I use Firefox, and I do not care whether the scroll bar color can be changed.
Edit: I don't mean to insult folks who do think this is a useful feature. I'm really just expressing my genuine surprise at the entire tone of the linked thread. I don't oppose inclusion of this feature, and lots of people have mentioned valid reasons why they want it. I will likely never truly understand it, or share that desire, but I'm certainly not gonna get scrappy about it. And, I probably wouldn't even notice, if it did become available in Firefox tomorrow.
The only practical purpose of the scrollbar in modern design is to serve as a visual indicator that an area can be scrolled, and to show location and scale.
If you have a reasonably complicated web app there is a good chance you are going to need a scrolling view inside your page. You still need a scrollbar to show that the area can be scrolled, but using the default control styling looks really ugly.
Really? Have you got any numbers for this, or are you actually saying "this is how I use it, and I presume most people are like me"? Because what you're saying simply isn't true for me.
When I'm reading a long block of content, I'll often click the scroll thumb and keep it clicked, using either the mouse or trackpad (or trackball, for that matter) to seek proportionally through the page. You don't get that proportionality of motion with either the mouse wheel or the two-finger trackpad gestures which mimic it.
The "most people" argument you're making is what leads to broken ideas like infinite scrolling, which appeals to one subset of the population who assume that everyone else uses their UI in precisely the same way that they do.
1) A native scrollbar that is restyled to match the colors of the webpage it is in? 2) A janky web view with scrollbars hidden and then reimplemented in JS which doesn't function they way you want it to?
Like it or not designers usually don't spend time on the subset of the audience that clicks and drags the scrollbar. They spend time drawing a pretty looking scrollbar.
When it comes to the implementation personally I think it still better to have a scrollbar that functions the way you expect it to, even if it looks a little different, rather than ending up with many different reimplementations of the scrollbar by different programmers.
> Like it or not designers usually don't spend time on the subset of the audience that clicks and drags the scrollbar. They spend time drawing a pretty looking scrollbar.
If the designers in question, who are working on a user interface element, don't consider how users will interface with it, it's fair to criticise them for not doing their jobs.
A large chunk of those edge cases are people with disabilities.
I have colleagues with a variety of learning disabilities. They strongly reject the label "disability".
"Dan, when someone gives me a document that I can't understand, and I tell them that I can't understand it, they often say 'well, of course you dont understand it, you are learnig disabled'. So what they're doing is transferring the blame for the lack of understanding from them to me. It's somehow my problem that I don't understand this document. But here's the thing: it's not my job to understand that document. I don't get paid to understand that document. It is their job to provide information in a meaningful accessible way, and they've failed. In this country they might even have a legal duty to make the information accessible. Or they might be paid from public funds to make the information accessible. I'm not disabled unless you chose to disable me."
This strong challenge echoes what some people with physical disabilities say: "my wheelchair is not the problem. You putting a step in front of your shop is the problem; you holding meetings in inaccessible buildings is the problem."
This kind of styling makes things slower, harder to use, more expensive to build and maintain. Just worse overall. The web would be a better place if people stopped doing it.
What I've ended up with is actually fairly close to the Mac OS X scrollbar, though I kind of got there by accident.
And no, in general, I wouldn't impose this on other people on a site I built. Leave stock UI interfaces alone.
But if you scroll the same websites in Firefox (which is my main browser), those will stand out. It's not only the scrollbar of the page, it's also any scrollbar that you can see inside a iframe or a textarea or really any divs with overflow:scroll;
If you think this is silly then you must think CSS and styling page is silly
I also tend to find most dark web designs (which is what a lot of these comments are talking about) just plain ugly. So, that's another factor. I've never made a dark website or web UI.
All of this is opinion, of course. My opinion should probably matter less than someone that really cares a lot about it.
I think it's silly because I think the way so many people approach web design is silly. Standardized UI components are not a bad thing. They are a very good thing. I like it when web pages look like they belong on my computer screen.
It's not only dark web designs. Actually if you look at any native application on your OS you will see "styled" scrollbars. And that never shocked you because they are styled according to the app.
> I like it when web pages look like they belong on my computer screen.
This is what "view > page style > no style" is for.
CSS was created to "style" page, and the scrollbar is part of the page. That you like CSS or not it seems silly to say that the scrollbar is the limit where you can style everything BUT the scroll bar on a page.
The page designer has no control over the display size.
Take a look at this comparison between Chrome and Firefox: https://cloudup.com/c8K9RMqPeDn
Webkit's ability to style scrollbars gives app developers a ton more control over a user interface. Some advantages of Webkit over Firefox here:
* Custom styling without hacky JavaScript "fake scroll" scripts
* Control over the width of a scrollbar
* Better usability for certain use cases by enabling Up and Down buttons
* Scrollbars actually look like they belong inside the application
* Doesn't remind users that they're in a web browser
In my 15+ years of building websites, I never wanted to change the color of the browser scroll bar either. But now I'm building a website that builds websites, so it's a whole 'nother ball game :)
You've convinced me. I did have someone once send me a design patch that used a JavaScript scrolly implementation, and I found it repulsive on every level, and I immediately rolled back the change and made it clear we would never ship anything like that, ever.
I'm glad you're in a position to motivate someone to implement it with cold hard cash, and I hope it works out.
Seeing as how most people only use one browser (data collected out of thin air), wouldn't changing the native styling on a browser scrollbar be confusing for people expecting the native styling?
Assuming you were using Firefox, what would you think about those two white scrollbars that stick out like a sore thumb in a dark interface?
Secondly, I prefer it. Far too many websites adjust things to the point where it's impossible to actually see. (Case in point: link styling. To the point where I have bookmarklets to remove styling from pages.)
I understand having the option to do so. But at the same time, I wouldn't use said option. To me, readability > aesthetics. And far too many websites don't respect that.
Please read JS;DR: http://tantek.com/2015/069/t1/js-dr-javascript-required-dead
You need to start differenciating between "documents" and "applications". What GP linked is a full-blown application. There's no "non-javascript" version of it.
I have been watching comments here and it is absolutely infuriating how it's very obviously armchair designers with zero experience in the field who are yelling out "aesthetics don't matter, scrollbars should always look like my system's scrollbars".
First of all, that is a ridiculous statement. On Linux for example there is no "system scrollbars", the styling is up to the toolkit and it is different in every single web browser out there. There's no consistency to be had across applications.
Second of all, every other toolkit element can be styled. Buttons. Dropdown menus. Text fields. Everything. They can all be styled not so your "documents" will be less readable, but so that developers and designers are empowered to create applications that look good, feel fluid, native, consistent.
They can be styled because applications can be more than just 20-input field forms. Native applications have the power to style their scrollbars (and they do so all the time), so web applications need it too to match such capabilities. We're not talking about an unused feature here.
And to those complaining about scrolling behaviour, accessibility etc: Those are the exact reasons why we need scrollbar styling. Because when your company is hounding you to have scrollbars that don't look out of place on a major browser "and look, our competition does it", you're realistically not just going to tell them "well, uh, readability is important". You're going to use fake, pure-js scrollers and accessibility will suffer. Everybody loses.
This isn't about purple scrollbars for your text documents.
Is it a full-blown application? Sure, I guess. But I could care less about that.
The actual content is a couple of screenshots - not exactly something that requires JS.
Also, I'm not speaking about designers at all. I am not a website designer, and never claimed to be one.
I'm speaking as someone who uses a web browser. As I said earlier: To me, readability > aesthetics. Especially as I'm often on-the-go. Things that look better but are lower contrast are often unreadable when you've got any amount of glare on the screen.
I use one web browser for the majority of my browsing. So yes, there is consistency. I'm not talking about across applications, I'm talking about within an application.
It may not be about purple scrollbars for your text documents, but that's what it will largely end up being used for.
And yes, native applications have a greater power to style things. But there is a distinction. Native applications inherently require greater trust. I'm not going to install any random application that comes my way.
Also, there are applications I stay away from precisely because of that - precisely because they have weird styling, and weird UIs. Case in point: Github's desktop application. Great program - or would be if I could get over the UI. But as is, I don't tend to use it.
That being said, it's a bit of a moot point regardless. It's just yet another thing I'll add to the list of bookmarklets to disable things to make websites readable. Along with many of the other things you mention as people being able to style as features.
Taking away freedoms from developers should only ever be done for security reasons. Not because you're scared they'll "misuse it and make ugly apps". Who cares about "ugly apps"? They are weeded out over time by natural selection.
Sadly the two functions have merged and so people deliver their documents in their apps. It's incredibly restrictive and a step backwards. Content that would be fine with a bit of html and css and leave the browser to display it is now wrapped up in extra css and javascript just because PHBs and bad designers insist on pixel perfect cross browser design.
1. A media interface / playback system for audio/video content.
2. A commerce platform.
Arguably, a communications platform for both realtime interactive and asynchronous messaging. Some of that probably arguably does belong in the browser, though much could go elsewhere.
The problems that accompany this are not just the complexity you describe, but bloat, security nightmares, stability and interactivity issues, and more.
I started calling for at least a 4-way split about a year ago, and I suspect it may emerge, though through simplified tools (likely eBook readers) acquiring more web-like capabilities.
https://www.reddit.com/r/dredmorbius/comments/256lxu/tabbed_...
The increasing tendency of browser vendors to incorporate Readability (or similar functionality) directly into their browsers seems to be one positive sign that there's an awareness of the problem.
Have you ever tried f.lux? Or maybe monitors with variable brightness? (Apple's Thunderbolt displays have a light sensor and adjust automatically, probably others as well)
Which is to say, the regular window scroll bar that we're familiar with is being overloaded for two different purposes: to interact with the app and to interact with the WM. Perhaps we should have two scroll bars to avoid this confusion?
Long time ago...
I'm sorry, I can't take this sort of complaint seriously...
Are we here to fight lame design fads by preventing people from building cool apps?
Less-good designers just aim for making something more-or-less cohesive, and bad designers rarely aim higher than "something cool" whether or not it supports my goal. Mediocre and bad design hinders me from achieving my goal by hiding or obscuring basic tools of interaction like buttons or scroll-bars. Even good design can be a problem, if my goals do not align with what the designer had in mind (for example, the designer wants to make a good impression for first-time customers, but I'm trying to file a customer-support ticket).
I appreciate that many of the people commenting on that ticket are just trying to make the world a more pleasant place, but some times I wish browsers had a button that would blast away all the custom styling of a page and just display the content in a standardised fashion (like the Reader mode many browsers have, but not just limited to long-form articles).
Edit: I'd also extend my opinion to cover things like a strip of items which must be scrolled through using other UI elements (e.g. Arrows or bubbles). While cute (maybe), this only allows uses to scroll at the one speed you give them. Just put it in a horizontal scroll or better yet, do something completely different.
But scrollbar styling is very different to scrolling logic. We're not talking about stealing people's mousewheels here, we're talking about changing scrollbar themes.
This is important for apps which want native scrolling logic inside their app but want their app to look native. The only alternative, in fact, is to reimplement scrolling logic inside the app. Performance suffers, accessibility suffers, everyone loses.
Shouldn't you not be attempting to modify the appearance of the scrollbars and letting them be the style the OS chooses, if you want them to look "native"? These developers seem to be wanting scrollbar styling so they can make scrollbars look different from their native appearance.
There are also quite a few truly native apps which have reinvented scrollbars instead of using the OS', and they are awkward to use because they don't behave exactly like native ones do.
Behaviour is not the same as styling. A good app's scrollbars will behave natively but will look in line with the rest of the app.
Compare GMail's scrollbars, especially the ones for the XMPP Chat, between Firefox and Chrome.
...or are we not agreeing on what "native" means? I've long thought it referred to the default appearance/behaviour of the OS/browser.
There are an astounding number of things I've seen abused, badly. I mean - look at the number of websites that aren't usable without a web font because they embedded all of their icons in it. Bonus points if they load the web font via JS. Bonus points if it's third-party JS.
Secondly, you cannot style every other UI component except this one. The browser chrome. The mouse pointer. The context menu (to an extent, depending on browser).
The thing with scrollbars is that they are at the boundary between the website and the browser. There are pros and cons - allowing "good" websites to apply "good" styles, but not for inane UIs.
Personally, I think that the better approach would be for the browser to color the scrollbar dependent on the background color of the page.
It would be nice if instead of having to reimplement _everything_ about the scrollbar to just add a feature or two, the native one was customizable. Because frankly, people are going to change it, so might as well make things less buggy.
As an OS X user who enjoys not seeing scrollbars, I find Google's use of them downright intrusive.
While my scrollbar preferences are very different from yours (I prefer ones that are always-visible, large and easy-to-grab), I agree that the web apps you use should conform to your UI preferences, and not the other way around.
Basically all of the times that I see this feature being used it is to make tiny, mostly transparent, or auto-hiding scrollbars that don't match the system UI at all and are a significant nuisance. I'm sure there are some sites that are styling them reasonably, but it doesn't seem to be the norm, even for the major players that have experienced design teams.
Disclaimer: I'm the guy who submitted the bounty :)
And this is basically why I hate the obstinacy of Mozilla.
It is not difficult to find discussions that spans more than one decade, where the official consensus is "web authors: get screwed, we would rather die than to add X feature".
Yet, I will never understand why Mozilla decided to implement some -webkit-prefixes to Firefox not that long ago, since their arguments can be reused in any neverending bug report like this one.
I'm against the webkit/blink monoculture that many web authors wished we had, but at this point I don't know what to expect.
One part of me applauds whenever a new website (ex. Mega or WhatsApp Web) launches without support for Firefox at day one, because ignoring Firefox is the way Mozilla will eventually stop their obstinacy.
But other part of me gets sad, because Firefox is the only feasible alternative the web has against webkit/blink, and the web can't afford to have a weak alternative against a monoculture.
I can only hope IE/Spartan to become a feasible alternative, because I can't expect Mozilla to stop their obstinacy until they have no choice.
And yet, this doesn't appear to be the case here: > People, people. We already know what the solution is to be -- binding XBL to pseudo-elements. There is no point commenting here. We all know you want it. If you're not volunteering to fix it, please don't comment at all.[0]
Rather, nobody seems to have stepped up to actually implement the feature for the past decade, wich isn't all that surprising since implementing this seems to be quite the effort:
> (1) this is a pretty involved bug; it would take weeks to months of work for a full-time engineer[1]
[0] https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c125 [1] https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c173
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.
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.
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...
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.