4 ms·
On pages, I fully agree. Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... wh
by willio58 3y ago
On pages, I fully agree. Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what?
It can be difficult to visually say "Hey, you! There's more to see if you scroll down in this area" You can try to use gradients with fade-outs, you can try to make it so the top of the last item in a scroll area is just visible enough to make it clear something can be scrolled into view. I've also seen actual text-based messages at the bottom of scroll areas to let users know. But at that point, is it really better than creating your own little scroll bar?
Really I think we just need better APIs from the browsers to customize when a scroll bar is shown (again, not on the page level but within scrollable elements), and what it looks like. This has already gotten much better over the years but there are still some features that would be great to have in this area.
One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add.
- Sohcahtoa82 3y ago> One thing I will say is I really dislike the smooth-scrolling behavior that some sites build in with JS. It's usually broken on macs that already have smooth scrolling and it's just a dumb thing to add. I'm fairly sure every platform uses smooth scrolling by default, and so I'm absolutely and utterly baffled as to why web devs think they need to implement it in JavaScript. If you're on a platform without it, or you've explicitly disabled it, there's probably a good reason for it, so re-adding it with JavaScript is taking away agency from the user.
- munk-a 3y ago> Within components, I also agree but I've found it hard to push back when a design calls for scrollbars because the alternative is... what? Accessibility. Mention that blind users will be unable to utilize the site without a lot of additional work and you can usually kill it dead. Custom scrollbars are such a niche thing that usually nobody is married to the idea - I've found it quite easy in the past to kill off those sorts of weird quirks in design with just that word... If you still have issues mention that mobile browsers often do a lot of customization around bounce scrolling and the like. Building this design choice out now likely means that whenever Apple releases a new phone it's quite possible that your site look antiquated and requires some major reworks.
- agos 3y agoare blind users impacted by styling scrollbars with css or even hiding/showing them?
- munk-a 3y agoI'm not certain. Are you willing to spend a week of your life testing every different screen reader to make sure your site doesn't break one?
- 5Qn8mNbc2FNCiVV 3y agoNo need I can tell you the answer: No they are not affected. Feel free to make your scrollbars blue green with a red border and rounded edges. The content is still as accessible
- hoherd 3y agoCan you give an example of when a design calls for stylized scrollbars and there is no alternative.
- tsimionescu 3y agoSay your app is satirizing flashy magazines with a funky magenta-and-yellow color theme. Would you like a gray scrollbar in the middle of the page? Or, if your app is a medieval role playing game with a wooden theme for the UI, would you expect flat gray scrollbars to work well?
- Izkata 3y ago> Really I think we just need better APIs from the browsers to customize when a scroll bar is shown (again, not on the page level but within scrollable elements) What do you have in mind beyond "always show", "show if needed", and "always hide"? Those have all existed for decades as "overflow: scroll", "overflow: auto", and "overflow: hidden".
- post-it 3y ago`overflow: hidden` hides the actual content. GP wants the element to be scrollable with a hidden scrollbar.
- asutekku 3y agoYou can do that already with: section::-webkit-scrollbar{ display: none; }
- Sohcahtoa82 3y ago> GP wants the element to be scrollable with a hidden scrollbar. If HN allowed emojis, I would reply with just the vomiting emoji.
- marcosdumay 3y agoThere is somebody on another thread asking for "stick to the visible margin of the element". But I guess most people want to change the scrolling behavior or appearance.