↵

Complete Guide To CSS Scroll Snap For Awesome UX(lambdatest.com)

over 3 years ago from Rawn wills, Web designer

  • 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