[HN Gopher] Don't use custom CSS scrollbars
___________________________________________________________________
Don't use custom CSS scrollbars
Author : Twixes
Score : 10 points
Date : 2023-06-12 22:12 UTC (48 minutes ago)
(HTM) web link (ericwbailey.website)
(TXT) w3m dump (ericwbailey.website)
| andersrs wrote:
| 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 thing for a UI library
| to spread this pattern.
| circuit10 wrote:
| What about when a native scroll bar looks completely off compared
| to the the theme of the rest of the page?
| burnte wrote:
| Function over form. If fancy scrollbars make it harder to use,
| then they should be gone. Design should never trump utility.
| circuit10 wrote:
| 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
| functional it is
|
| To be fair it probably does have contrast issues which I
| could improve
|
| Note: it's an Electron app so maybe that's different
| okanat wrote:
| Think like this: They have never been a part of the theme of
| the page. Just like the user's magenta tabbar
| circuit10 wrote:
| 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...
| Gualdrapo wrote:
| 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).
| circuit10 wrote:
| 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
| willio58 wrote:
| 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
| something can be scrolled into view. I've also seen actual text-
| based messages at the bottom of scroll areas to let users know.
| But at that point, is it really better than creating your own
| little scroll bar?
|
| 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), and what it looks like.
| This has already gotten much better over the years but there are
| still some features that would be great to have in this area.
|
| 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.
| okanat wrote:
| I wonder if there is a way to override the entire web with a
| custom stylesheet plugin like Stylus for Firefox.
| Minor49er wrote:
| 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
___________________________________________________________________
(page generated 2023-06-12 23:00 UTC)