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

61–70 of 250 posts

Re: Don't use custom CSS scrollbars

#61

Post by andersrs »

yonixw wrote: post #13
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...

Fixed headers and popups that are not a problem per se but it's bad implementations that cause the problems. It's possible to use a print stylesheet to hide certain elements and set the background to white.

Re: Don't use custom CSS scrollbars

#62

Post by arp242 »

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.

Useful for who? I set my scrollbar width fairly wide intentionally so I can actually click on the thing and use it without too much effort. Some developers thing it's "useful" if I'm not able to do that by setting a significantly smaller width, which is not useful at all for me because every single time it makes the experience worse.

In some fairness, the fault is also with Firefox and Chrome for not being able to just say "never style scrollbars" like you could with Opera in 2000. Sigh...

Re: Don't use custom CSS scrollbars

#63

Post by bee_rider »

Is it possible to configure Firefox to ignore custom scroll bars? I haven’t noticed many at all.

IMO it is a dumb feature, but there’s no harm in having it in CSS for people who want it, as long as the rest of us can ignore it.

Re: Don't use custom CSS scrollbars

#64

Post by tsian2 »

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…

I did make a scrollbar that appeared to stick to the bottom of the table. I used a div with the same width as the table, used a scroll event listener to update the tables actual scroll position and only had it appear when the user was currently over a table and that table overlapped the bottom of the viewport. It worked well in the sense that people would use it without thinking about it.

Re: Don't use custom CSS scrollbars

#65

Post by derefr »

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…

That's not so much "styling the scroll bar"; that's "trying to tell the OS widget library's metrics-policy logic its business, because you know better than it does, because it's insufficiently smart."

If you think about it, a "smarter" OS widget library would always "float" scrollbars at the edge of the visible part of the viewport that the overflowing surface occupies. No configurability needed — it's just always better.

So why expose the ability to do that for certain scrollbars in CSS — rather than just making all scrollbars everywhere always do that?

Re: Don't use custom CSS scrollbars

#66

Post by Dalewyn »

fbrchps wrote: post #31
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…

> highly opinionated solutions as something definite even though it has a narrow focus on what the author cares about Most users either don't have such strong opinions about their scroll bars, or would prefer it looks coherent with the application, or OS-native (your preference). But I can almost guarantee the larger group of non-technical users will have never thought about the styling of their scrollbars for more t…

Considering the trend now is to straight up remove scroll bars (why the fuck...), I expect conversations like this will become moot in the not so distant future.

Re: Don't use custom CSS scrollbars

#68

Post by nawgz »

I mean, I use custom scrollbars so my apps look the same on each OS. Do you propose that I should instead accept windows making horrible ugly things that take up more space rather than just showing a minimal scroll bar?

Seems like a non issue to me. My users are much happier with the more minimalist scrolls I’ve implemented over windows stealing 30px per scrollbar

Re: Don't use custom CSS scrollbars

#69

Post by codedokode »

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.

Re: Don't use custom CSS scrollbars

#70

Post by barneygale »

kelnos wrote: post #52
karaterobot wrote: post #24

> Scrollbars are part of the area of the browser that is outside your scope of concern. No, they're actually in my scope of concern, that is the whole point of your article. The reason they were brought into my scope of concern is that a lot of people had a use case for styling custom scrollbars. I have a use case for it myself. If you're saying "don't abuse your ability as a developer and make inacessible websites"…

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.

Shoo. You're ruining the web!
Post reply on HN