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

11–20 of 250 posts

Re: Don't use custom CSS scrollbars

#11

Post by Gualdrapo »

circuit10 wrote: post #4

What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?

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 OS host rather than something the website itself should provide (now, if there was an standard way across every device to scroll to the very top or the very bottom of a view (webpage, list, etcetera...). I am a designer myself but I agree than we should not mess with them. And the plus that it's a bit less of work for us (and devs, when they have to implement those things).

Re: Don't use custom CSS scrollbars

#12

Post by circuit10 »

Gualdrapo wrote: post #11
circuit10 wrote: post #4

What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?

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

Re: Don't use custom CSS scrollbars

#13

Post by yonixw »

andersrs wrote: post #3

The worst pattern I've seen is setting the page height to the viewport height and then placing scrollbars on containers. For example this particular UI library has managed to break print layout and page navigation keys and mouse scrolling until you focus the content div https://www.skeleton.dev/docs/get-started I was once guilty of doing this on a site I made but the users called it out so I fixed it. It's another th…

Oh the pain of printing any modern news site with their fixed headers and popping ads. You just select the text and "R-CLK->Print selected" praying that at least the content is just a list of paragraphs (

) and nothing more...

Re: Don't use custom CSS scrollbars

#15

Post by Sohcahtoa82 »

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…

> One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add.

I'm fairly sure every platform uses smooth scrolling by default, and so I'm absolutely and utterly baffled as to why web devs think they need to implement it in JavaScript.

If you're on a platform without it, or you've explicitly disabled it, there's probably a good reason for it, so re-adding it with JavaScript is taking away agency from the user.

Re: Don't use custom CSS scrollbars

#16

Post by pvinis »

this post could have been way less that a million lines long. maybe if it had a nice colored scrollbar it would be more pleasant to read.

kidding aside, it is longer that it could be, to get the point across. maybe the browser just needs a similar setting to the macos and windows one, to never use css on scrollbar, and we're good?

Re: Don't use custom CSS scrollbars

#18

Post by [deleted] »

andersrs wrote: post #3

The worst pattern I've seen is setting the page height to the viewport height and then placing scrollbars on containers. For example this particular UI library has managed to break print layout and page navigation keys and mouse scrolling until you focus the content div https://www.skeleton.dev/docs/get-started I was once guilty of doing this on a site I made but the users called it out so I fixed it. It's another th…

[deleted]

Re: Don't use custom CSS scrollbars

#19

Post by madeofpalk »

circuit10 wrote: post #8
burnte wrote: post #5

Earlier quoted context omitted.

Function over form. If fancy scrollbars make it harder to use, then they should be gone. Design should never trump utility.

https://user-images.githubusercontent.com/13787163/161954436... Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? When I was developing that my main goal was to get the UI looking consistent and clean so it would feel good to use, which I think is an underappreciated thing; if your UI doesn’t “feel right” then people won’t enjoy using it no matter how…

Use CSS color-scheme: dark to indicate that system widgets, such as scroll bars, should be dark https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

Re: Don't use custom CSS scrollbars

#20

Post by kypro »

Minor49er wrote: post #2

On the contrary, we should be encouraging people to customize scrollbars so that scrolling is taken into consideration again. It can help get rid of trends like invisible/hidden scrollbars or those useless horizontal progress bars that shows how far into a page you've read

There's been an ongoing trend in UI design in recent years to assume more and more of the user.

The removal of scrollbars from browsers confused my parents. Instead of having up and down arrows by your content now you're just expected to just know that you scroll with your mouse / trackpad. Similarly, modern versions of Windows will just assume you know that the four squares at the bottom of your screen is where you need to click to start using your computer, and Mac will just assume you know the red dot closes the current window. These patterns probably seem obvious to us as power users, but I find average users get endlessly confused by them.

And it's not just elderly people who get tripped up by this. I've seen kids who have primarily used phones and tablets growing up get confused when they first use a desktop computer because they haven't yet learnt all the required prerequisite UI patterns. Even as a power user if you switch from Windows to Mac (or vice versa) it often takes some time just figure out all of the completely unintuitive modern UI because the UI designer is lazily assuming you already know how to do everything...

Just yesterday my girlfriend (who uses her computer almost every day) asked me for help replying to an email in outlook on her laptop. Confused I asked, "what do you mean you need help replying to an email?". Well, she was confused because she doesn't use outlook much and didn't know she needed to click the small curved arrow icon to reply to an email. For the last 5 minutes she had been stupidly looking for a button that said "reply".

While I completely agree with your sentiment about scroll bars, I feel like this a much bigger issue and one that web developers shouldn't be required to fix. The core issue here is that your OS / browser shouldn't be hiding your scrollbar to begin with... This isn't something web developers should be addressing, but the UI designers who think it's preferable for me to have a browser URL bar that is 80% of my screen width at the expense of the word "back" on my back button.

Post reply on HN