Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Don't use custom CSS scrollbars

ericwbailey.website

Post reply on HN
Print view View original

111–120 of 250 posts

Re: Don't use custom CSS scrollbars

#111

Post by Eldt »

MereInterest wrote: post #32
abhibeckert wrote: post #25

Earlier quoted context omitted.

> being able to style and control the width of the scrollbar is useful No it's not. I have operating system wide settings for how scroll bars should work and the rules are complex with visibility and size of the scroll bar changing from one second to the next. I expect my scroll bar settings to apply to all websites and they are significantly better than what codepen does. Codepen also doesn't allow me to scroll past…

Or to phrase it a different way: Being able to style and control the width of the scrollbar is so incredibly useful that it must be in the hands of users, and not designers.

Good thing CSS is client side!

Re: Don't use custom CSS scrollbars

#112

Post by SPBS »

preommr wrote: post #21

> Don't use custom CSS scrollbars Alright, I guess I'll go back to using js scrollbars instead /s I hate articles like this because they present highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about. Web apps can be incredibly powerful and convenient, sometimes a scrollbar is in the middle of the page like with that codepen. In those situations, being able…

> I hate articles like this because they present highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about.

Whatever the author says about custom scrollbars isn't going to stop CSS-Tricks from styling their scrollbar. The article is perfectly fine because programmers are free to ignore it, and if this article convinces even one programmer to switch from a custom scrollbar to a non-customized scrollbar it's likely they never needed it anyway.

Re: Don't use custom CSS scrollbars

#113

Post by sfvisser »

jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

I get the argument that fully custom scroll bars aren’t great for accessibility in many cases. However, the default behavior out of the browser or OS is pretty terrible in many cases as well.

Scroll bars popping in and out of existence awkwardly reflowing elements around it. Tiny unusable 30px wide horizontal scroll bars inside an input element because an element overflows 0.7px due to font size rounding issues or what not.

Default scroll bars are great for documents, but pretty terrible mostly for slightly more complicated UIs where a lot of info is displayed in small area.

Re: Don't use custom CSS scrollbars

#114

Post by ryandrake »

donkeybeer wrote: post #100
jojobas wrote: post #99

Earlier quoted context omitted.

Would you extend that to buttons, text fields and all other components in general? I'd say default should be whatever the web designer wanted, if you're not agree you can always use one of the overrider plugins.

Yes 100%, apps should follow the theme for components set by the user.

I would go even further: websites should not be the ultimate decider on any style-related decision. Including colors, font faces, text size, margins, padding, content width, and any other UI elements. Website should be able to suggest these things, but browsers should default to the user’s preference or the system’s configuration. The user should have the final say on how the User Agent displays HTML content.

Browsers have ceded far too much control over these things to websites, to the point where we are even debating whether they should style such fundamental OS controls as scroll bars!

Re: Don't use custom CSS scrollbars

#115

Post by defanor »

zokier wrote: post #36

How many of the arguments apply to any CSS styling?

Indeed, I was just about to comment on the linked page overstyling fonts and colors while suggesting to avoid overstyling other elements. The title can be clipped to "Don't use custom CSS" while reusing the same justifications.

Re: Don't use custom CSS scrollbars

#116

Post by eviks »

quickthrower2 wrote: post #101
eviks wrote: post #90

Earlier quoted context omitted.

It's an awful design because it ignores one is the most important factors of scrolling - document length. But then having wide scroll bars in short documents where you'd never use them is also bad design

It is good design to have "wide-enough-for-long-doc" scrollbars in short documents for principle of least surprise.

That's repeating the same mistake - trying to force one generic principle onto every situation.

Opt-in can solve that - only users that don't get surprised by a lack of useless elements can remove them

Re: Don't use custom CSS scrollbars

#118

Post by tsimionescu »

jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

First of all, the OS does not style widgets, the browser does. And scrollbars are completely different in different browsers - they have different sizes, different behavior, different look-and-feels. So either you create versions of your app which match each browser individually, or you re-style the scrollbars to look the same as the rest of the app.

Thirdly, there is an obvious counter to your arguments that shows that one-size-fits-all design is not actually what users always want: games. You wouldn't expect a game to use the system look-and-feel, it rightfully uses a look-and-feel that matches the game itself.

And we can extend this observation further out: if your app is self-contained enough, and you have a distinctive enough style that your users like, then you should re-style everything away from the OS style to your specific unique look.

Should every app do this? Absolutely not. But is there no case outside gaming where an app should? Of course not.

Re: Don't use custom CSS scrollbars

#119

Post by Buildstarted »

grishka wrote: post #105
jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

YouTube's custom scrollbars that take actual space on screen at all times annoyed me so much that I made a userscript that got rid of them. I made the choice to use overlay scrollbars, and I will enforce it if needed.

Sorry but what's overlay scrollbars? (I found a few results but I'm not sure if they're the same thing you're talking about)

Re: Don't use custom CSS scrollbars

#120

Post by Sakos »

sfvisser wrote: post #113
jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

I get the argument that fully custom scroll bars aren’t great for accessibility in many cases. However, the default behavior out of the browser or OS is pretty terrible in many cases as well. Scroll bars popping in and out of existence awkwardly reflowing elements around it. Tiny unusable 30px wide horizontal scroll bars inside an input element because an element overflows 0.7px due to font size rounding issues or wh…

I recently discovered to my dismay that Firefox uses Windows 11's setting for whether to hide the scroll bar. And it's hidden by default. Though FF is happy to hide them by default on its own anyway. I can't imagine how this is a good thing for end users for whom computers are already unpredictable and difficult to understand. Modern UX is a nightmare.
Post reply on HN