Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.
There are legitimate uses for snap-scrolling, e.g. a horizontal carousel on mobile (or even desktop, depending on implementation), where you want swiping to swipe so the next item is in view.
Also, you said half these things should be avoided -- care to list the others? It seems like the theme of the post is "you don't need JavaScript to do this." If some functionality is rarely needed, but does have use cases, it's nice to know that it can be done in CSS without requiring JS (which would be clearly worse).
https://shouldiuseacarousel.com/
So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.
1) You implementing something boards (like trello) on mobile. The well-established-in-all-the-apps-that-specialize-in-this behavior is snap scrolling.
2) Tiktok/stories/etc. When you scroll up or right, does it ever land you in between two stories? No. This is the exact behavior.
3) Presentations. Say you are building a presentation tool. The whole point is to define separate slides that are on screen one at a time. This is a very natural and appropriate use of this behavior.
So, yeah, carousels suck. But, this behavior is commonly used and useful in a lot of modern software.
It's also about making your home page a giant carousel, instead of showing multiple things vertically. Don't do that, either.
IMO, one great use for carousels is when you have a product catalog with a bunch of category sections, like Netflix. Each category gets a header, e.g. "Action" "Family" "Romance" "Horror" and each category is a horizontally scrolling list of products, with the next one on the list half-visible on the side, so it's clear that you can scroll it into view.
Scroll snap can be pretty good for that.
My understanding is that NY Times spends quite a lot of effort on user metrics, so I would guess, but can't say for sure, that they have evidence that their carousels work.
would probably be best to split up the galleries into smaller groupings, though
See something like https://airbnb.com which uses it for categories a’la the App Store. Image galleries, Netflix-type layouts, etc.
What's the UX benefit here?
I get that mobile apps use horizontal swiping and some websites want to be app-like, but even in apps the only common horiztonal-swipe pattern I see is the Android hidden menus pattern, which is (a) a subject of debate in UX circles and (b) absolutely nothing like horizontally scrolling item selection, which is still a bad idea even in native mobile apps.
The other major example I can think of is Instagram's story circles, which I feel must be intentionally unusable to try and force people to view stories in their full-screen tap-to-advance format.
Actually I was thinking the top comment would be something about the site breaking the back button
Yet you can't see the examples without JavaScript.
I suppose the author could show the CSS snippets inline and make you click to a demo, but that's not very fun is it?
I really think comments like this aren't helpful and presumptuous to pressing forward. People hate change and love their table layouts... Just going to make a friendly counter argument:
- Did you read what this actually does? It's for anchor tags...
- Bootstrap 5 uses this by default.
- Lot of crappy websites out there. I choose loading one line of CSS versus jQuery + animate all day...
- For perspective, almost 100% of every little interaction on native apps are animated these days. It's liked so much by the general population that, some would say, made iOS so appealing in the beginning to take off. People like interaction.
- It's possible your opinion does not represent the majority anymore (or even that the HN general opinion).
- By making it a browser-defined CSS property versus being JavaScript, you are actually opening accessibility doors for people having this be device configurable.
I really think if someone hates it so much or for accessibility reasons, instead they should just disable it in their browser.
So literally the opposite of what you said.
---
Edit: Example of why this is important to be part of CSS for accessibility versus JavaScript:
```
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
or:
```
@media (prefers-reduced-motion) {
.animation { animation: none; }
:root {
scroll-behavior: auto;
}
}
I think HN can chill a bit here.
scroll-behavior: smooth seems to only affect the behavior of clicking named anchor tags. It doesn't seem to change the behavior when scrolling with a mouse wheel or trackpad. Other than general accessibility issues related to animations, I don't see any usability concerns here.
scroll-snap-type and scroll-snap-align also don't seem to affect the behavior when scrolling with a mouse wheel or trackpad, except that shortly after you stop scrolling the browser will smoothly scroll to the specified snap points. I suppose this could be over-used (like anything), but it seems to me that there are some pretty obvious places where using this would be entirely appropriate and not unpredictable or disorienting.
::-webkit-scrollbar styling strikes me as the most concerning, both because of how easy and tempting it is to over-use and because the browser support has some subtle gotchas. But this one doesn't seem related to your complaint about smooth versus snappy scrolling.