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

141–150 of 250 posts

Re: Don't use custom CSS scrollbars

#141

Post by pmontra »

presentation wrote: post #57

One thing I didn’t expect was that for a large data table that allowed side scrolling, Windows users comfortable with Excel didn’t know that they could scroll side to side because the scroll bar fell below the fold. I ended up needing to measure the page to set the height of the table to make sure that the table wouldn’t be taller than the page. But what I really wanted was to sticky the scroll bar so that it was alw…

Wouldn't the solution be to make the data table as wide as it needs to be and use the OS horizontal scrollbar to access the rightmost columns?

It probably breaks the right side of the page grid layout but if there are many columns to see, the ability to see them should grant an exception. I made that choice a few times with my customers. They wanted to see the data in those pages, as if they were in Excel.

Re: Don't use custom CSS scrollbars

#142

Post by pyrale »

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…

> Alright, I guess I'll go back to using js scrollbars instead /s

That'd be much better if you actually need a different behaviour.

Trying to bend the native scrollbar to your will is an exercise in pain.

Re: Don't use custom CSS scrollbars

#143

Post by 411111111111111 »

pyrale wrote: post #137
tsimionescu wrote: post #118

Earlier quoted context omitted.

First of all, the OS does not style widgets, the browser does. And scrollbars are completely different in different browsers - they have different sizes, different behavior, different look-and-feels. So either you create versions of your app which match each browser individually, or you re-style the scrollbars to look the same as the rest of the app. Thirdly, there is an obvious counter to your arguments that shows t…

I believe the point is that if you're unhappy with the default scrollbar, you should get rid of it altogether rather than torture it into doing something it's not meant to do. Having done e.g. an endless scroll application, the scrollbar was unfit for our use, no matter what we did. The right solution was to remove scrollbar and implement our own scrolling mechanism.

Which is straight up what jmbwell was complaining about, as it breaks their workflow such as tapping on the top to scroll to the beginning and everything else they mentioned.

Re: Don't use custom CSS scrollbars

#144

Post by quickthrower2 »

eviks wrote: post #116
quickthrower2 wrote: post #101

Earlier quoted context omitted.

It is good design to have "wide-enough-for-long-doc" scrollbars in short documents for principle of least surprise.

That's repeating the same mistake - trying to force one generic principle onto every situation. Opt-in can solve that - only users that don't get surprised by a lack of useless elements can remove them

Not a mistake. At worse a tradeoff. Hiding a scroll bar when you go below some arbitrary document height that would classically warrant a scroll bar is just confusing. People who use a mouse to scroll will not know what to do and assume there is a bug. And sometimes you want scrollbar level control even on a short document.

It is not forcing them to use the scrollbar: keyboard shortcuts and menu items should still work as well.

Re: Don't use custom CSS scrollbars

#145

Post by nailer »

411111111111111 wrote: post #143
pyrale wrote: post #137

Earlier quoted context omitted.

I believe the point is that if you're unhappy with the default scrollbar, you should get rid of it altogether rather than torture it into doing something it's not meant to do. Having done e.g. an endless scroll application, the scrollbar was unfit for our use, no matter what we did. The right solution was to remove scrollbar and implement our own scrolling mechanism.

Which is straight up what jmbwell was complaining about, as it breaks their workflow such as tapping on the top to scroll to the beginning and everything else they mentioned.

I appreciate this is off topic and not a solution but on iOS you can tap the hole on top of your screen to scroll to the top on any application.

Re: Don't use custom CSS scrollbars

#146

Post by nailer »

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…

many native apps on mobile platforms don’t use scroll bars at all. Content simply extends off screen and more content can be pulled in.

Re: Don't use custom CSS scrollbars

#147

Post by eyelidlessness »

afavour wrote: post #56
abhibeckert wrote: post #25

Earlier quoted context omitted.

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

> 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. Stuff like this often happens because of a lack of native styling options. Can’t change the appearance of the scroll bar (for, yes, often dumb reasons)? OK then we’ll use a giant JS library that poorly replicates every aspect of scrolling. At least with native scroll styling, ug…

This doesn’t make any sense. The native behavior is what OP wants. No one needs to recreate the native behavior, it is already available

Re: Don't use custom CSS scrollbars

#148

Post by bryanrasmussen »

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…

>Sorry if the developer doesn’t like the way it looks…

in my experience it is generally designers or business people who don't like it, the developer generally argues your line.

Re: Don't use custom CSS scrollbars

#149

Post by codeptualize »

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…

> but that's what the user expects their scroll bar to look like!

You base that on..? I’ve had users complain about their native scrollbars more than once. Native scrollbars can make things look very broken.

In terms of responsiveness, true for a normal website, but sometimes impossible in more complex ui elements (like I said, not the page scroll, but in page scrollable elements)

I would really like to see some research on this idea that people prefer native elements, it’s not what I see in user tests and the feedback I get. My experience is that people want a functioning app that doesn’t look broken.

My whole point is: we should be able to provide a great experience that’s accessible and allows the user to give their preferences (like prefers reduced motion).

Re: Don't use custom CSS scrollbars

#150

Post by eviks »

pickingdinner wrote: post #96
eviks wrote: post #85

> 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 i…

I was under the impression "scrollbar = more to see" has been somewhat of a standard for a while now. The Mac example is just one of those classic UI fails. The worst are the pages where the scroll wheel doesn't work, even when you can see the scrollbar just fine. I'm always baffled, since no simple page would have that problem. Clearly they developed it and didn't care for breaking it. In html I would sometimes forc…

> "scrollbar = more to see" has been somewhat of a standard for a while now.

That's not a great standard because it conflates conveying information with providing control.

001 px width is enough to convey isScrollable info, but makes it impossible to scroll

100 px width makes it easy to scroll, but is a waste of space to convey convey isScrollable info

Post reply on HN