Live data from Hacker News

Don't use custom CSS scrollbars

ericwbailey.website

231–240 of 250 posts

Re: Don't use custom CSS scrollbars

#231
post #120

Earlier quoted context omitted.

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.

There's a lot to dislike in GTK 4. I'm hoping that it gets used by fewer applications.

Re: Don't use custom CSS scrollbars

#232
post #44

I have an application that looks terrible if I don't make the scrollbar transparent. I thought this was going to be about not using those horrible javascript scrollbar libraries, which make the code a lot more complex (I tried them all).

> I have an application that looks terrible if I don't make the scrollbar transparent. You have an application that works terrible if you make the scrollbar transparent. Transparent scrollbars are not intuitive.

There's a chat on the left side, right side shows media. If I allow scrollbars to render normally the whole site is split in 2, in the middle being a scrollbar, which looks bad especially if not overlay. I've considered not caring about it and just let the scrollbar, but it bothers me. It's my application anyway, the browser is not just a document reader anymore, it's an application framework (as well).

Re: Don't use custom CSS scrollbars

#234

Earlier quoted context omitted.

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

Would you then also force developers to stick with the very limited set of native components, or are they allowed to make custom ones?

They can make custom ones when a native one doesn't exist.

There's literally no reason to write your own implementation of a drop-down menu. Zero. None.

And yet, I occasionally run into a site where I need to enter my mailing address, and they have a drop-down menu to choose my state. In a native component, I can just tab to it, type "or", and Oregon (or OR if they're using the abbreviation) will be chosen, and I can just tab on to the next input field.

But every now and then, I find myself on a form where that doesn't work. It turns out, what looks like a drop-down menu is actually a fancy div, and when you click on it, another div pops up with divs for each item. Oh, but I can't even use my keyboard to choose an option! I HAVE to click!

WHY DO WEB DEVS DO THIS!? What was gained by this? Someone spent time to reimplement something for absolutely zero gain, and a LOT of loss! WHY!?

And my complaints don't even begin to address how the custom solution is probably awful for accessibility.

You don't need to make a custom button.

You don't need a custom date picker.

I'm struggling to think what custom components you think need to be made.

Re: Don't use custom CSS scrollbars

#236

I just wanted to say thank you. I didn't know about the setting to always show scrollbars on macOS and them being hidden by default was bothering me for a while.

it does cause problems sometimes when there are embedded scrollable panels (that may not even scroll) where the scrollbars get in the way.

Re: Don't use custom CSS scrollbars

#237
post #72
post #60

Earlier quoted context omitted.

> Really I think we just need better APIs from the browsers to customize when a scroll bar is shown (again, not on the page level but within scrollable elements) What do you have in mind beyond "always show", "show if needed", and "always hide"? Those have all existed for decades as "overflow: scroll", "overflow: auto", and "overflow: hidden".

`overflow: hidden` hides the actual content. GP wants the element to be scrollable with a hidden scrollbar.

> GP wants the element to be scrollable with a hidden scrollbar.

If HN allowed emojis, I would reply with just the vomiting emoji.

Re: Don't use custom CSS scrollbars

#239
post #52

Earlier quoted context omitted.

Taking all the flexibility away would be fantastic. I wish all webapps looked as close as possible to native apps, and couldn't style things like buttons.

> looked as close as possible to native apps This is a meaningless statement, because even native apps don't "look like" native apps. No operating system has a universal style across all native apps, and some (Windows) aren't even internally consistent with the OS's apps.

So that's an excuse to make things even more inconsistent?

I get your point, though; I'm a Linux desktop user, and have to contend with apps written using a variety of UI framework. For that reason, I tend to try to stick with GTK apps, as I prefer consistency. I have Qt set up to use/emulate GTK's theming as close as possible. No, it's not perfect, but most things on my desktop look pretty consistent.

Except webapps, of course! They break everything when it comes to consistency. I wish that wasn't the case.

Re: Don't use custom CSS scrollbars

#240

> Scrollbars are part of the area of the browser that is outside your scope of concern. No, they're actually in my scope of concern, that is the whole point of your article. The reason they were brought into my scope of concern is that a lot of people had a use case for styling custom scrollbars. I have a use case for it myself. If you're saying "don't abuse your ability as a developer and make inacessible websites"…

I've never met a styled scrollbar that was better than those native to my OS, and that includes the ones imposed by any app, not just web apps. Even Edge is guilty.

That's a great argument for styling scollbars. If your OS has the best scrollbar, users in other OSs might appreciate being able to use it too.
Post reply on HN