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

21–30 of 250 posts

Re: Don't use custom CSS scrollbars

#21

Post by preommr »

> 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 to style and control the width of the scrollbar is useful.

How about we hold developers accountable for their work instead of trying to ruin it for the rest of us because a minority do something badly.

Re: Don't use custom CSS scrollbars

#22

Post by okanat »

henriquez wrote: post #14
okanat wrote: post #9

I wonder if there is a way to override the entire web with a custom stylesheet plugin like Stylus for Firefox.

You could use Gemini as an alternative to HTTP / HTTPS. No weird surprises in a text-based browserspace.

This is a non-answer though. Most of the web is in HTTP nobody can change that.

Re: Don't use custom CSS scrollbars

#23

Post by bbrks »

One of my very first blog posts[1], which took off at the time on HN[2] was on this topic - in reaction to the trend of "horizontal page progress bars" (a.k.a. scroll bars!)

What's old is new again... and again... and again... :)

[1] https://bbrks.me/reinventing-scrollbars/

[2] https://news.ycombinator.com/item?id=6246777

Re: Don't use custom CSS scrollbars

#24

Post by karaterobot »

> 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" then yeah, okay. But taking options away from people because they might theoretically make bad moves with them is not a good strategy. If you took away every CSS attribute I could use to make inaccessible websites, we wouldn't have anything left. You'd be surprised what I can mess up. Better to teach people how to do it right and why.

Re: Don't use custom CSS scrollbars

#25

Post by abhibeckert »

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…

> 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 the beginning/end of the file, which feels jarring and just wrong with a touch scroll device.

And I'd bet it also falls apart with assistive technology for people who can't physically operate a mouse or trackpad, which in most countries is illegal. Why open yourself up to those issues?

Re: Don't use custom CSS scrollbars

#26

Post by Karellen »

circuit10 wrote: post #12
Gualdrapo wrote: post #11

Earlier quoted context omitted.

The thing is that the looks of scrollbars vary so much between platforms - on mobile you can barely see them only when you do the action of scrolling ! So it would be rather weird that, if you are seeing a website in mobile and you just put a scrollbar because reasons , you're quitting some horizontal/vertical space to the effective area of the website. And note that the act of scrolling is much more related to the O…

It’s an Electron app for me so it’s only going to be on Chromium on desktop But if scroll bars can be themed with CSS now, that should still give the browser control over things like whether they take up space or not and the actual scrolling behaviour, right? It would just allow the developer to give some styling hints so it doesn’t look completely disconnected from the rest of the page

But it will look disconnected from every other app on the user's system.

Whatever style the user currently has installed on their system, if the scrollbars on your app look the same as all the other scrollbars they ever use, they'll recognise them instantly and know how to use them instantly, with zero additional cognitive load.

You users might be using enough of their brain to figure out your app (maybe because they're also being partially distracted by their boss/child/phone/pet/music) already, don't make them spend time thinking about your gorram scrollbar as well.

Re: Don't use custom CSS scrollbars

#27

Post by okanat »

circuit10 wrote: post #10
okanat wrote: post #7

Earlier quoted context omitted.

Think like this: They have never been a part of the theme of the page. Just like the user's magenta tabbar

It’s an Electron app in my case so there’s no browser chrome for it to fit into, and the scroll bar is also in the middle of dark-themed content: https://user-images.githubusercontent.com/13787163/161954436...

Since Electron can be considered the browser chrome itself, the developer can access to its lower level API to customize those things. You can also set the dark mode in CSS.

Re: Don't use custom CSS scrollbars

#29

Post by munk-a »

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 those sorts of weird quirks in design with just that word... If you still have issues mention that mobile browsers often do a lot of customization around bounce scrolling and the like. Building this design choice out now likely means that whenever Apple releases a new phone it's quite possible that your site look antiquated and requires some major reworks.

Re: Don't use custom CSS scrollbars

#30

Post by kibwen »

On the contrary, I'm completely in favor of custom CSS scrollbars because it's unimaginable that websites could do worse than modern OSes already do when it comes to scrollbars. If anyone here has a time machine, immediately after you've finished killing Hitler may I recommend that you gently persuade Jony Ive away from the terrible decision to make scrollbars hidden, low contrast, and impossibly thin.
Post reply on HN