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

211–220 of 250 posts

Re: Don't use custom CSS scrollbars

#211

Post by pyrale »

tsimionescu wrote: post #154
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.

The GP was specifically complaining about apps not respecting their scrollbar choices. They said that apps should defer all scrolling UX to the OS, as that is what the user chose.

You're right, I misread that. Thanks.

Re: Don't use custom CSS scrollbars

#212

Post by htek »

If only this were a law. I can't stand when sites play "hide the scrollbar" or "find the hover sweet spot to display the scrollbar" and I click on where I think the scrollbar is and instead click on a link that's was two pixels away from where I thought I was clicking. How is this accessible? Edit: How does this improve the user experience?

Re: Don't use custom CSS scrollbars

#213

Post by quickthrower2 »

eviks wrote: post #155
quickthrower2 wrote: post #144

Earlier quoted context omitted.

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

> Hiding a scroll bar when you go below some arbitrary document height that would classically warrant a scroll bar is just confusing. No it's not because you OPT INTO this feature and could change the document height from arbitrary to a threshold where using your wheel is uncomfortable (and that would depend on your device, e.g., with infinite Logitech scroll wheel that length is much bigger since it's very easy to s…

Ok if we are now saying it is an opt-in feature (to hide the scrollbar for short enough docs) then fine I guess.

Feels like we have hashed out a JIRA description in the planning session of some imaginary product, now someone code this!

Re: Don't use custom CSS scrollbars

#214

Post by tom_ »

kaba0 wrote: post #158
toastal wrote: post #130

Earlier quoted context omitted.

Same argument for why we should use tabs over space when accessibility seems squarely focused on the blind and screen readers when visual impairment is a broad spectrum. My eyesight isn’t ‘bad’, but it isn’t what it used to be and with so many code bases using 2-space indentation, I wonder why this isn’t configurable as I have a lot of difficulty discerning the contrast when it’s so shallow.

Any modern IDE will allow you to display 2-space indentations however you wish.

Where is this option in Visual Studio 2022, and Xcode?

Re: Don't use custom CSS scrollbars

#215

Post by tremon »

zelphirkalt wrote: post #185
tsimionescu wrote: post #152

Earlier quoted context omitted.

My point was that a general "no app shall customize scrollbar look and feel" is wrong, as there are certain kinds of apps that do benefit from custom look and feel. Sure, not all games, but also games are not so entirely different from other kinds of apps. Also, I thought the specific points about CSS and how to achieve custom styling if desired are irrelevant. The arguments I was replying to were about UX, not about…

> My point was that a general "no app shall customize scrollbar look and feel" is wrong, as there are certain kinds of apps that do benefit from custom look and feel. Sure, not all games, but also games are not so entirely different from other kinds of apps. But the point is, that your website is not an app. At most it is a web app, and therefore governed by the browser and the user's preferences and choices for the…

A website should fundamentally be a different degree of commitment than installing an application into the user's system

I agree with that, but this is opinion and not fact. There's a lot of money invested in blurring/obviating this distinction, exactly because installing a real app has more hurdles (both for the developer and for the user).

Re: Don't use custom CSS scrollbars

#216

Post by jabroni_salad »

circuit10 wrote: post #4

What about when a native scroll bar looks completely off compared to the the theme of the rest of the page?

This is actually why I have been resisting the new tweetdeck experience. (That and the activity feature being removed). The scrollbars are so bad on Windows. The screenshots I have seen from mac look nice enough, but windows scrollbars were never meant to be in the middle of the webpage 6 times.

Re: Don't use custom CSS scrollbars

#217

Post by willio58 »

asutekku wrote: post #188
post-it wrote: post #72

Earlier quoted context omitted.

`overflow: hidden` hides the actual content. GP wants the element to be scrollable with a hidden scrollbar.

You can do that already with: section::-webkit-scrollbar{ display: none; }

This is exactly what I’m talking about though. This browser prefix is not standard.

Re: Don't use custom CSS scrollbars

#218

Post by hunter2_ »

The author's main point is "When you override this expression, you’re indirectly communicating that someone’s personal preferences are less important than your own visual sensibilities" but that's always be the entire point of CSS. The browser comes with default styles, the user can override those, the website can override those overrides, and then extensions can override that. Granted, very few users probably do override the browser default styles due to those defaults rarely getting used anyway given the prevalence of websites doing so...

Also interesting that the author makes no mention of the ability for the site to set the color of the address bar area for Android browsers. Seems like the same gripe should be had.

Aside: I find it funny that the author says "This phenomenon is why checkboxes use squares and radio buttons use circles" and then links to a page for the reader to find out more, in which the prominent photo is of a radio with square pop-out buttons.

But a good read nonetheless.

Re: Don't use custom CSS scrollbars

#219

Post by gwern »

chrismorgan wrote: post #98
gwern wrote: post #53

> When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The mockup scrollbar looks nothing like scrollbars are now. > Do you need to make someone download that extra data? > > Spoilers: you don’t. Scrollbars work without CSS. No, they don't, because web browsers have been busy removing scrollbars as much as possible . As I type t…

> As I type this, there is no scrollbar on my screen because Firefox no longer does that. If you’re using Linux: blame GNOME for this; in GTK 3 and 4, they actively removed your ability to get non-overlay scrollbars without each individual app manually supporting the concept. So there’s no global switch or anything like on macOS or Windows. Firefox has a setting “Always show scrollbars”, but precious little other GTK…

The problem is, there are so many to blame. It's not just GNOME: it's Microsoft, and Apple, and GNOME, and... It can't be fixed by just one entity refusing to go with the flow; the flow is the problem. As long as there seems to be some sort of invisible consensus by designers worldwide that Scollbars Are Bad, the problem will spread and infiltrate systems, even ones which ostensibly default to scrollbars.

('A setting' is also not a fix but a copout as I already pointed out - you know >99% of users will never change it, especially on mobile. Whether open source or closed, maintainers are always the same when it comes to taking the hard path of fixing something's design or the easy path of saying 'you can set an option, CLOSED'.)

Re: Don't use custom CSS scrollbars

#220

Post by tsimionescu »

criley2 wrote: post #200
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…

The "But games don't standardize the UI" is actually a worse argument than it appears on the surface. Since every game is re-inventing the wheel, they're all making inferior wheels. UX/accessibility is so far behind OS/web in full screen games that I'm impressed that disabled people can even play most games at all. It's not uncommon to boot up a brand new game in 2023 that has the menu design and UX consideration of…

I don't think most games would become compatible with a screen reader if their inventory system had a better scroll bar. You are right that game UIs tend to be well behind some common OS elements in terms of accessibility, and even low hanging fruit are sometimes missing, but it is also the case that many (most?) games are fundamentally incompatible with many disabilities and as such improvements in certain specific UX areas are low value. Doesn't excuse the fact that they should do better where it's possible, though.
Post reply on HN