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

81–90 of 250 posts

Re: Don't use custom CSS scrollbars

#81

Post by luisgvv »

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…

Saw this once, it was a nightmare to maintain the page once it got out of control

Re: Don't use custom CSS scrollbars

#82

Post by fiddlerwoaroof »

sapling-ginger wrote: post #77
kelnos wrote: post #52

Earlier quoted context omitted.

Taking all the flexibility away would be fantastic. I wish all webapps looked as close as possible to native apps, and couldn't style things like buttons.

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

Re: Don't use custom CSS scrollbars

#83

Post by eviks »

abhibeckert wrote: post #25
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…

Interesting setup, do you have a link to it?

Re: Don't use custom CSS scrollbars

#84

Post by [deleted] »

lolinder wrote: post #55
codeptualize wrote: post #54

I agree with many points but there is definitely a need for custom scrollbars. The reality is that if you have scrolling in the page (like a column layout for example), you kinda have to customize the scrollbars. If only to not break your layout as scrollbars are completely different everywhere, hidden, different widths, some ugly, some nice, no reliable way to detect the situation, it's a mess. I would opt for more…

Your UI really shouldn't be so unresponsive that the width of an element's scroll bar throws off your design. As for the aesthetics of the scroll bar: it might look ugly to you, but that's what the user expects their scroll bar to look like! Designing well for web requires a bit of a paradigm shift compared to designing a print document or even a native app. You have to accept that you're going to be a guest in the u…

[deleted]

Re: Don't use custom CSS scrollbars

#85

Post by eviks »

> There’s no visual indication that there’s more content present in this window—the only way to discover it is to scroll downwards. However, without an affordance to indicate the presence of additional offscreen content, the chances are low that someone will bother to check. > This is why Apple introduced a preference to always show scroll bars.

But the proper solution is to add the info/affordance in that specific instance instead of always wasting space even when you don't use the scroll bar. This would also allow you to have a more convenient wide scroll bar for when you actually need to use it (in very large documents/lists, though currently you can't setup your scroll bar to depend on that)

And here is the main problem with the article - this general approach blocks would block all UI innovation until some browser/OS vendor implemented something poorly (of course, this doesn't mean your implementation will be better, but someone else's will be)

Re: Don't use custom CSS scrollbars

#88

Post by eviks »

jmbwell wrote: post #41

I recognize that web developers want full control over the user experience, usually to the point of reimplementing all of the native UI widgets provided by the user’s OS. As a user, I prefer for my OS to do things my OS does, including styling my widgets. My scrollbars, my scrolling behavior, window chrome, all of it… whether it’s good or bad or right or wrong, that’s between me and my OS. As a user, I hate when web…

Facebook isn't known for great design, so the fact they can't get it right tells us very little

Similarly with the MS/Apple - if they had already done all the work, they would allow you to force your scrollbar choice

> Corollary: there is always another option

What's your other option to only show wide scrollbar in large documents since these are the only ones I actually need scrollbar in?

Re: Don't use custom CSS scrollbars

#90

Post by eviks »

codedokode wrote: post #69

Modern disappearing scrollbars in Linux are an awful design: - as scrollbar in browser disappears, I cannot see the position on the page and whether it is scrollable at all - as scrollbar handle is very narrow, it is difficult to drag it You might ask, why drag the scrollbar handle? Well, when you have tens thousands of lines in the terminal, it will take a long time to scroll it using touchpad or mouse wheel.

It's an awful design because it ignores one is the most important factors of scrolling - document length. But then having wide scroll bars in short documents where you'd never use them is also bad design
Post reply on HN