Don't use custom CSS scrollbars

> I hate articles like this because they present highly opinionated solutions as something definite

The first paragraph says "I feel this is a mistake". The author is very clearly expressing an opinion, not a fact. They go on to attempt to justify their opinion. I feel like you're railing against something that... isn't really happening here.

I will grant you that there are some very narrowly-defined situations where styling a scrollbar is useful and actually gives a better experience. But in general, leave them alone. They are browser chrome, and should not be touched by webpages themselves.

> When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this:

The mockup scrollbar looks nothing like scrollbars are now.

> Do you need to make someone download that extra data? > > Spoilers: you don’t. Scrollbars work without CSS.

No, they don't, because web browsers have been busy removing scrollbars as much as possible. As I type this, there is no scrollbar on my screen because Firefox no longer does that. For a moment, I thought maybe FF still showed at least 1 pixel of the scrollbar, but I scraped it off with my fingernail and it turned out to be a cat hair. The scrollbar appears only for like a second before 'helpfully' fading out, and is a few pixels wide (on a 4k portrait monitor where I'm not exactly hurting for space). Chromium still has a semi-reasonable scrollbar, but I can't vouch for the official Google Chrome. Safari and Mac OS/iOS have, of course, been years ahead of everyone else in the wonderful pro-user innovation of 'hiding scrollbars and making them a pixel wide if absolutely forced to display one'.

> ...This is why Apple introduced a preference to always show scroll bars...Windows followed this path blazed by Apple

Yes, a preference to go back to the old standard behavior, which in designer-speak means "we done f-ked up, but we hate real users and love the sleek minimalist appearance https://asktog.com/atc/the-third-user/ more, so this is our way to get our users to shut up". And 'blazed', in this case, is 'lit on fire many decades of hard-earned UI experience'.

> As an aside, I set the operating systems I use to always show scroll bars.

Which is why you should support custom CSS scollbars to negate browsers & OSes hiding them.

Your UI really shouldn't be so unresponsive that the width of an element's scroll bar throws off your design. As for the aesthetics of the scroll bar: it might look ugly to you, but that's what the user expects their scroll bar to look like!

Designing well for web requires a bit of a paradigm shift compared to designing a print document or even a native app. You have to accept that you're going to be a guest in the user's browser, and that means you don't have control of everything. Failing to accept that just leads to frustration, but if you can embrace it and strive to be a good citizen of the user's browser, the resulting symbiosis can be beautiful in its own right!

One thing I didn’t expect was that for a large data table that allowed side scrolling, Windows users comfortable with Excel didn’t know that they could scroll side to side because the scroll bar fell below the fold. I ended up needing to measure the page to set the height of the table to make sure that the table wouldn’t be taller than the page. But what I really wanted was to sticky the scroll bar so that it was always visible, or to display it at the top of the table instead of the bottom.

I want to style scroll bars for this, not to make them prettier.

> Also in terms of accessibility, so long as they're doing CSS-only changes, and the bar is sized compliant and has proper focus states, assistive technology won't care.

Eh, it depends on your audience. My father has very poor eyesight. He doesn't use any assistive tools (e.g. screen readers or magnifiers), but he does need his computer-reading glasses. Accessibility isn't just ADA compliance and/or screen reader support.