Don't use custom CSS scrollbars
ericwbailey.website
Don't use custom CSS scrollbars
1–10 of 250 posts
Re: Don't use custom CSS scrollbars
#2On 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
Re: Don't use custom CSS scrollbars
#3The 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.
Re: Don't use custom CSS scrollbars
#4What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?
Re: Don't use custom CSS scrollbars
#5What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?
Function over form. If fancy scrollbars make it harder to use, then they should be gone. Design should never trump utility.
Re: Don't use custom CSS scrollbars
#6On 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.
Re: Don't use custom CSS scrollbars
#7What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?
Think like this: They have never been a part of the theme of the page. Just like the user's magenta tabbar
Re: Don't use custom CSS scrollbars
#8What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?
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 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
Re: Don't use custom CSS scrollbars
#9I wonder if there is a way to override the entire web with a custom stylesheet plugin like Stylus for Firefox.
Re: Don't use custom CSS scrollbars
#10What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?
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...