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

161–170 of 250 posts

Re: Don't use custom CSS scrollbars

#161

Post by agos »

fiddlerwoaroof wrote: post #82
sapling-ginger wrote: post #77

Earlier quoted context omitted.

> 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.

> no operating system has a universal style across all native apps Imo, an app that isn’t using Cocoa (or carbon for older apps) widgets on macOS isn’t “native”. If you just use the default widget set on macOS, your app will have a consistent style with every other native app. If you use Qt, Swing, Electron, etc., your app will look out of place and break in ways that annoy at least some of your users.

there's more than twenty years of examples of macOS apps using Cocoa and Carbon and being inconsistent with the rest of the OS, iTunes being the most egregious

Re: Don't use custom CSS scrollbars

#162

Post by agos »

munk-a wrote: post #29
willio58 wrote: post #6

On pages, I fully agree. Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? It can be difficult to visually say "Hey, you! There's more to see if you scroll down in this area" You can try to use gradients with fade-outs, you can try to make it so the top of the last item in a scroll area is just visible enough to make it clear som…

> Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? Accessibility. Mention that blind users will be unable to utilize the site without a lot of additional work and you can usually kill it dead. Custom scrollbars are such a niche thing that usually nobody is married to the idea - I've found it quite easy in the past to kill off th…

are blind users impacted by styling scrollbars with css or even hiding/showing them?

Re: Don't use custom CSS scrollbars

#163

Post by agos »

WirelessGigabit wrote: post #47

Also don't use buttons that don't show me the link I'm navigating to. If you must have a different style, style them around an `a href`, not a `button`. And actions should be buttons, not links. I'm looking at all of those cookie websites with a 'link' that says 'Confirm choices' and a button that says 'Allow all'. Instinctively we go to the button, not the link. Weirdly enough I responded on the Image send to Micros…

aria roles solve that problem easily for screen readers, so you can use buttons for navigation and text links for actions without big issues

Re: Don't use custom CSS scrollbars

#164

Post by grishka »

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)

On macOS, when you use Apple input devices, the scrollbars work like on iOS and Android. They appear on top of the scrollable content when you start scrolling and disappear shortly after you stop. You can make them visible all the time, but then they will take up space like they do in e.g. Windows.

https://support.apple.com/en-us/guide/mac-help/mchlp1225/mac

Re: Don't use custom CSS scrollbars

#165

Post by naillo »

LeonB wrote: post #160

The OS gets the scrollbar wrong so often that as a user and developer I’ve found I need to take care of it. It’s fine relying on the “platform” but the platforms are just criminal cartels holding users and apps hostage. Two specific examples, just on scroll bars. I’ve found the platform failing to support dark mode and failing to support mixed high DPI scenarios. Both of these failings result in poor accessibility an…

Making a custom scrollbar because it doesn't support dark mode is worse for accesibility overall. Your custom scrollbar likely won't work well with tools disabled used for scrolling that isn't the mouse.

Re: Don't use custom CSS scrollbars

#166

Post by al_be_back »

the OP mentioned apple's headaches with the "disappearing" scrollbar, yes I often experienced that in Apple's own site, iTunes Connect (manage App submissions, rejections/comments etc). Disappearing scrollbars on TextArea with large amounts of text made is very easy to miss whole paragraphs of text, can be very costly.

I'm for "Customizing the UI", as long as it helps the User get the most out of the site.

Re: Don't use custom CSS scrollbars

#167

Post by nailer »

411111111111111 wrote: post #159
nailer wrote: post #145

Earlier quoted context omitted.

I appreciate this is off topic and not a solution but on iOS you can tap the hole on top of your screen to scroll to the top on any application.

Yes, that's one of the features that break with endless scroll bars, which was what this whole discussion was about.

It works for every single app that has endless scroll bars on my entire history of using iOS. Try it on Reddit for example.

Re: Don't use custom CSS scrollbars

#168

Post by LeonB »

naillo wrote: post #165
LeonB wrote: post #160

The OS gets the scrollbar wrong so often that as a user and developer I’ve found I need to take care of it. It’s fine relying on the “platform” but the platforms are just criminal cartels holding users and apps hostage. Two specific examples, just on scroll bars. I’ve found the platform failing to support dark mode and failing to support mixed high DPI scenarios. Both of these failings result in poor accessibility an…

Making a custom scrollbar because it doesn't support dark mode is worse for accesibility overall. Your custom scrollbar likely won't work well with tools disabled used for scrolling that isn't the mouse.

I am a user who uses accessibility tools and is stating that the operating system is failing in both the size and the tone of the scroll bar. Btw, trivialising dark mode is not cool. I have photosensitivity at times and when it’s bad the pain of items appearing bright coloured is excruciating. Just so you know. (Special shout out to platforms who flash a huge white rectangle before rendering the dark mode content. It’s like pins in each eye.)

The confidence with which you state “is worse for accessibility overall” is just breath taking.

Had you written “may be” instead of “is” and “in many circumstances” rather than “overall” - then I would understand that you were thinking about this.

But no you’re claiming perfect knowledge of a situation that you are not inside and which I am inside.

The operating system gets it very wrong in very many circumstances. I end up having to provide - configurable - alternatives to overcome some of the egregious mistakes.

If the operating systems start to get it right- awesome I can make the overrides opt in not opt out.

Re: Don't use custom CSS scrollbars

#169

Post by meindnoch »

rektide wrote: post #35

There was a quick starburst trend around 2010 where super-fancy css componentry was being heavily explored & all sorts of interesting but not necessarily better stuff was being done, with radical redesigns. My mini-project submission for a job I got was using a super melted Geiger esque up-down button set. I've tried to go back & find evidence of this era, to find more examples of these heavily glitzed up components.…

Like this?

https://pbs.twimg.com/media/Fb5HJBFWQAIH09w.jpg

Post reply on HN