1. Home
2. Build JavaScript-free scroll snapping via CSS scroll snap

Build JavaScript-free scroll snapping via CSS scroll snap

What is CSS scroll snap?

Welcome to a new devspedia story. Today we'll talk about CSS scroll snapping. This is a CSS feature that was introduced back in 2016, but it was improved greatly over the years, and is supported across all major browsers today.

How to use CSS scroll snap?

Usage is easy, check the snippet below:

  .container {
    scroll-snap-type: y mandatory; /* for vertical scrolling you can use x for horizontal */
  }

  .child {
    scroll-snap-align: start; /* or center or end */
  }

The example above is the simplest, and minimum working example of scroll snap. Just give the container the {@html `scroll-snap-type`} property, and {@html `scroll-snap-align`} to the child. that's all you need.

Demo

Here's a demo below, inspect it to see the HTML/CSS used. (scroll down in the green box)

That's all for today. Thanks for reading devspedia. I love you, and I'll see you the next time.