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

41–50 of 250 posts

Re: Don't use custom CSS scrollbars

#41

Post by jmbwell »

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 apps mess with scrolling. It breaks affordances I use, like tapping at the top of the screen to jump to the top of the page, or home/end keys on desktop. It is inevitably a worse experience than native scrolling, no matter how hard you try. Facebook mobile web for example is basically unusable right now because it’s trying to overthink scrolling. If Facebook can’t get it right, I’m not sure what makes anyone else think they can.

And why would anyone want to? Honestly! Microsoft and Apple have already done all that work.

As for scroll bars and other widgets, again, right or wrong, that’s not for some web site to mess with. Sorry if the developer doesn’t like the way it looks… they only have to deal with it while working on it. As a user, I am stuck with the developer’s choices, even if they override my own choices, which I’ve made in my OS, which is where those choices belong.

If you’re going to clobber native experience, I would argue, don’t do it unless there is absolutely no other option. Corollary: there is always another option.

Re: Don't use custom CSS scrollbars

#42

Post by WWLink »

kypro wrote: post #20
Minor49er wrote: post #2

On the contrary, we should be encouraging people to customize scrollbars so that scrolling is taken into consideration again. It can help get rid of trends like invisible/hidden scrollbars or those useless horizontal progress bars that shows how far into a page you've read

There's been an ongoing trend in UI design in recent years to assume more and more of the user. The removal of scrollbars from browsers confused my parents. Instead of having up and down arrows by your content now you're just expected to just know that you scroll with your mouse / trackpad. Similarly, modern versions of Windows will just assume you know that the four squares at the bottom of your screen is where you…

> And it's not just elderly people who get tripped up by this. I've seen kids who have primarily used phones and tablets growing up get confused when they first use a desktop computer

It goes the other way as well lol. There's lots of ridiculous random gestures for android/iOS

Re: Don't use custom CSS scrollbars

#44

Post by Sujeto »

I have an application that looks terrible if I don't make the scrollbar transparent. I thought this was going to be about not using those horrible javascript scrollbar libraries, which make the code a lot more complex (I tried them all).

Re: Don't use custom CSS scrollbars

#45

Post by inetknght »

Sujeto wrote: post #44

I have an application that looks terrible if I don't make the scrollbar transparent. I thought this was going to be about not using those horrible javascript scrollbar libraries, which make the code a lot more complex (I tried them all).

> I have an application that looks terrible if I don't make the scrollbar transparent.

You have an application that works terrible if you make the scrollbar transparent.

Transparent scrollbars are not intuitive.

Re: Don't use custom CSS scrollbars

#46

Post by kps »

circuit10 wrote: post #8
burnte wrote: post #5

Earlier quoted context omitted.

Function over form. If fancy scrollbars make it harder to use, then they should be gone. Design should never trump utility.

https://user-images.githubusercontent.com/13787163/161954436... Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything? When I was developing that my main goal was to get the UI looking consistent and clean so it would feel good to use, which I think is an underappreciated thing; if your UI doesn’t “feel right” then people won’t enjoy using it no matter how…

> Wouldn’t this look completely off with a massive light mode default Chromium scroll bar in the middle of everything?

Yes, which is why that design is wrong. Respect @media(prefers-color-scheme). Forcing a light or dark background causes readability issues for some people.

Re: Don't use custom CSS scrollbars

#47

Post by WirelessGigabit »

Also don't use buttons that don't show me the link I'm navigating to. If you must have a different style, style them around an `a href`, not a `button`.

And actions should be buttons, not links. I'm looking at all of those cookie websites with a 'link' that says 'Confirm choices' and a button that says 'Allow all'. Instinctively we go to the button, not the link.

Weirdly enough I responded on the Image send to Microsoft via MS Edge article about how even Microsoft, the writer of LOTS of documentation on how to make good UIs, abuses all these things.

Now, of course we could argue about how these things just visuals, but that's not completely true. Lots of screen readers depend on the semantics of the document structure to actually identify objects correctly. Button? Action, edit, sign up, delete, .... Something that actually changes something.

Link: navigation...

Re: Don't use custom CSS scrollbars

#48

Post by Waterluvian »

Scrollbars are frustrating to handle. Getting their actual size if you need to do stuff like compensate for a virtual table is really tedious. And Macs do them entirely different from everyone else, so that’s not nice either.

Re: Don't use custom CSS scrollbars

#49

Post by pessimizer »

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

I usually go into the inspector, find the element that contains the story and "screenshot node." Or I go the opposite way and "block elements" with ublock until I get a reasonable page, then delete all of those rules after I print. Unless they have a print stylesheet, of course. People still do those.

Re: Don't use custom CSS scrollbars

#50

Post by graycat »

Several billion people understand and make good use of the standard HTML scroll bars.

For any change, on the first day, only the programmer understands the new scroll bars.

For an Internet user who each month or so goes to dozens, maybe hundreds, of Web sites, all the new scroll bars are something new to learn likely particular to that site. So, for that user, a significant part of the Internet becomes dozens or even hundreds of times harder to use.

Same for standard HTML push buttons, links, check boxes, radio buttons, multi-line text boxes, single line text boxes (and the ones for passwords), etc.

Changes make the site obscure and significantly more work to use.

Web site owners: When I see a Web page with an obscure user interface, commonly I just do a single left click on the X in the upper right corner of the Web browser instance displaying that page.

Beyond an obscure user interface, often I can conclude that the Web site does not want me to see the content on their Web pages because they cover up the content with pop-up windows or expand and contract some header material at the top of the page, material that wastes limited vertical space on my screen.

Another problem is Web pages that follow my mouse pointer and respond to its position without my giving a click. Big interruption in using the site. Nearly always I'm just trying to bring the window to the top of the Z-order so, instead, have to swat like a dozen flying insects the various responses to the mouse click -- again, I do want to see the page and just want to bring it to the top of the Z-order.

Then there is Web site code making the window larger -- again it's like swatting flying insects. No, no, 1000 times no, with rare exceptions, I do NOT want any one page to hog my screen area. The reason is fundamental: In visiting the page, I'm trying to get something DONE, and that requires seeing at least two windows, maybe a few more than two. When one program takes up all or too much of the screen area, I can't see the other windows I need and, thus, can't get the work done.

There is an old remark that goes something like "Just because you could doesn't mean you should."-

Post reply on HN