Rawn wills

Web designer Joined 4 months ago

  • 2 stories
  • 2 comments
  • 11 upvotes
  • Posted to Complete Guide To CSS Scroll Snap For Awesome UX, in reply to Erik Fanki , Jul 02, 2020

    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.

    0 points
  • Posted to Complete Guide To CSS Scroll Snap For Awesome UX, in reply to S B , Jul 02, 2020

    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.

    0 points
Load more comments