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

121–130 of 250 posts

Re: Don't use custom CSS scrollbars

#121

Post by theobr »

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…

In the article, he has a CodePen embedded that would be UNUSABLE if it didn't have decent custom scroll bars. This post is so egregiously bad.

Re: Don't use custom CSS scrollbars

#122

Post by pmontra »

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 don't want to sound to harsh, but my desktop environment and I know how we want our scrollbars to be and why. Web designers from thousands miles away do not.

Furthermore having the need to style scrollbars to make a UX work smells of bad UX design. Given a full screen page, is there really no space for the standard OS scrollbar (or my custom one,) which users see all day long every day they use their computer? Is the OS's UX really so bad that must be improved by a web app? It's wasted designer and developer time.

Re: Don't use custom CSS scrollbars

#123

Post by Sakos »

fbrchps wrote: post #31
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…

> highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about Most users either don't have such strong opinions about their scroll bars, or would prefer it looks coherent with the application, or OS-native (your preference). But I can almost guarantee the larger group of non-technical users will have never thought about the styling of their scrollbars for more t…

Just because most users don't think about it doesn't mean it doesn't impact them and that they should be ignored. The very fact that they can't fight for the solution that best benefits them means the onus is on us as designers and programmers to do that for them, instead of handwaving their needs away.

Re: Don't use custom CSS scrollbars

#124

Post by tsimionescu »

leokennis wrote: post #107
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…

There should be simple OS level overrides on CSS. Not a user stylesheets or extensions or hard to find a browser flag, just a preferences window where even my mother could indicate “always show scrollbars in Windows style” or “all text should be at minimum 14 points”.

I don't understand why people keep bringing up the OS in this discussion. The OS doesn't have anythign to do with the look and feel of a web page, it's the browser that decides on a default look. And even for native apps, there is no "OS look and feel" - at least not on Linux or Windows. A Win32 button doesn't look exactly like a XAML button not like an MFC button, and definitely not like a UWP button. A Gnome button doesn't look like an XFce button, nor like a Plasma button.

Also, people like it this way! The OS is just a dumb layer that my hardware vendor is forcing on me. I care much more that Word works the same when I switch from a Dell laptop to an Apple one than some OS preference.

Re: Don't use custom CSS scrollbars

#125

Post by pmontra »

Buildstarted wrote: post #119
grishka wrote: post #105

Earlier quoted context omitted.

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)

Not parent but probably this from GNOME https://gitlab.gnome.org/GNOME/gnome-control-center/-/issues...

I disable them in settings. I want to see them all the time.

Re: Don't use custom CSS scrollbars

#126

Post by chrsjxn »

Aeolun wrote: post #38

> You might be scoffing at the kilobytes this removal represents, but when it comes to web performance, every little bit counts I read this, and I get a very good idea of what the rest of the post will contain.

The awesome thing is that this comes right after an example that uses about 200 characters...

I know we love to talk about optimizing web contents, but a single selector and a few hundred bytes (before minification and compression...) is not significant

Re: Don't use custom CSS scrollbars

#127

Post by leokennis »

tsimionescu wrote: post #124
leokennis wrote: post #107

Earlier quoted context omitted.

There should be simple OS level overrides on CSS. Not a user stylesheets or extensions or hard to find a browser flag, just a preferences window where even my mother could indicate “always show scrollbars in Windows style” or “all text should be at minimum 14 points”.

I don't understand why people keep bringing up the OS in this discussion. The OS doesn't have anythign to do with the look and feel of a web page, it's the browser that decides on a default look. And even for native apps, there is no "OS look and feel" - at least not on Linux or Windows. A Win32 button doesn't look exactly like a XAML button not like an MFC button, and definitely not like a UWP button. A Gnome button…

So to be sure, you’d like your Word on Mac to also have a “close window” button as a square “X” on the top right instead of a red circle on the top left?

OS’s are not always 100% internally consistent but every OS vendor is striving towards that.

Finally I agree that the OS should not natively style a web page (although as I said I’m in favor of user overrides). A scroll bar is not a web page. It’s an OS level interface element.

Re: Don't use custom CSS scrollbars

#128

Post by donkeybeer »

Sakos wrote: post #120
sfvisser wrote: post #113

Earlier quoted context omitted.

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.

gtk has forced overlay scrollbars now. Its possible to enable normal scrollbars again with a flag right now, but for how long?

edit: they are removing the flag from gtk 4: https://bugzilla.gnome.org/show_bug.cgi?id=790677#c6

gtk is effectively a gnome project now, and we all know gnome's attitude toward design and users.

Re: Don't use custom CSS scrollbars

#129

Post by Buildstarted »

pmontra wrote: post #125
Buildstarted wrote: post #119

Earlier quoted context omitted.

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)

Not parent but probably this from GNOME https://gitlab.gnome.org/GNOME/gnome-control-center/-/issues... I disable them in settings. I want to see them all the time.

Ah, ok. Completely different from what I was thinking with regards to scrollbars/css. Thanks!

Re: Don't use custom CSS scrollbars

#130

Post by toastal »

ccooffee wrote: post #59
fbrchps wrote: post #31

Earlier quoted context omitted.

> highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about Most users either don't have such strong opinions about their scroll bars, or would prefer it looks coherent with the application, or OS-native (your preference). But I can almost guarantee the larger group of non-technical users will have never thought about the styling of their scrollbars for more t…

> 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 sup…

Same argument for why we should use tabs over space when accessibility seems squarely focused on the blind and screen readers when visual impairment is a broad spectrum. My eyesight isn’t ‘bad’, but it isn’t what it used to be and with so many code bases using 2-space indentation, I wonder why this isn’t configurable as I have a lot of difficulty discerning the contrast when it’s so shallow.
Post reply on HN