Don't use custom CSS scrollbars

Re:Don't use custom CSS scrollbars by presentation on Monday June 12, 2023 @08:34PM (#36303457)

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 always visible, or to display it at the top of the table instead of the bottom.

I want to style scroll bars for this, not to make them prettier.

[ Parent | on HN ]

Re:Don't use custom CSS scrollbars by tsian2 on Monday June 12, 2023 @09:20PM (#36303872)

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.

[ Parent | on HN ]

Re:Don't use custom CSS scrollbars by derefr on Monday June 12, 2023 @09:42PM (#36304041)

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?

[ Parent | on HN ]

Re:Don't use custom CSS scrollbars by presentation on Tuesday June 13, 2023 @12:51AM (#36305500)

That's cool and all, but until I have enough influence personally to dictate Microsoft's design, I don't really have a choice but to depend on web APIs to achieve the desired effect.

[ Parent | on HN ]

Re:Don't use custom CSS scrollbars by derefr on Tuesday June 13, 2023 @11:12AM (#36311428)

You can dictate GTK and Qt's design.

Also, I think for Chrome at least, it draws scrollbars using its own widget library — built on top of Skia, I think? Not sure what the widget-library part itself is called. You could definitely contribute to that.

[ Parent | on HN ]

Re:Don't use custom CSS scrollbars by pmontra on Tuesday June 13, 2023 @03:00AM (#36306578)

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.

[ Parent | on HN ]