4 comments

  • S B, over 3 years ago

    If this is really an article on 'awesome UX' it should start with 'don't use scroll snap'. Short article, sure, but much better information.

    1 point
    • Rawn wills, 3 years 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.

      0 points
  • Erik Fanki, over 3 years ago

    Nice and thorough article! Still, is this a good practice? I'm curious as to where the applications of this is useful? It's mostly these slick agency websites that use it for cases, usually to my annoyance. I prefer to have control over my scroll.

    1 point
    • Rawn wills, 3 years ago

      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