Designer News
Where the design community meets.
Web designer Joined 7 months ago
Haha, I partially agree with the headline suggestion. However, I feel there are practical user case scenarios where scroll snap can be a handful. I will incorporate these pointers in the article as well. Thanks for you comment. Appreciate it.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Thanks for the compliments. I am glad you liked the article!
A common use case for scroll snapping is an image carousel. For example, to create a horizontal image carousel that snaps to each image as you scroll, we can specify the scroll container to have a mandatory scroll-snap-type on the horizontal axis. set each image to scroll-snap-align: center to ensure that the snapping centers the image within the carousel.
Another common case that can benefit from scroll snapping are pages with multiple logical sections that are vertically scrolled through, e.g., a typical product page. scroll-snap-type: y proximity; is a more natural fit for cases like this. It does not interfere when a user scrolls to the middle of a particular section but also snaps and brings attention to a new section when they scroll close enough to it.