CSS Snap Scroll Tutorial


What is Snap Scroll?

CSS Snap Scroll allows you to create an awesome scrolling experience for your users by declaring snap points on your page. So as the user scrolls the page the page snaps to certain points creating a nice experience for the users.

CSS snap scroll can be used for image carousels or a landing page etc.

CSS Snap Scroll Demo


Why Snap Scroll?

A lot of time as a developer/designer of the website, we want our content, including paragraphs, images etc. to be completely visible on the screen. But due to the poor scrolling of the users, the content is never aligned properly (content is not completely visible on the screen together) making the experience poor.

But with CSS snap scroll things have changed. So let's dive into making our first very simple example of CSS snap scroll.


CSS Snap Scroll Demo

Let's first create a simple html structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Scroll Snap</title>
</head>
<body>

</body>
</html>

Now let's create 3 sections with a heading. You can include any content you want in those sections including images.

....
<body>

  <div> <h1>Section One</h1> </div>
  <div> <h1>Section Two</h1> </div>
  <div> <h1>Section Three</h1> </div>

</body>
....

For implementing CSS Scroll Snap, we need to know 2 important properties:

  • For Parent Element - scroll-snap-type

  • For Child Elements - scroll-snap-align


scroll-snap-type

scroll-snap-type property should be set for the parent/container element eg. body containing all the child elements eg. div in our example.

It defines the scroll axis for snapping (x, y, both) and also snap strictness such as (none, mandatory, proximity)

  • mandatory will snap to any closest section mandatorily

  • proximity will snap to nearest section if it is in the close range of the snap point

For our example we will set this property on the body element:

body{
    scroll-snap-type: y mandatory;
}

This will make the y axis the snap axis for vertical snap scroll.


scroll-snap-align

scroll-snap-align property should be set for the child element eg. div.

It defines where the snapping should occur (none, start, end, center). The default is none.

For our example we will set this property on the div element:

div {
    scroll-snap-align: start;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

This will make the snapping occur from the start.


Finally the entire code for the CSS Snap Scroll

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Scroll Snap</title>

  <style>

  body{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }

  div {
    scroll-snap-align: start;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  </style>

</head>
<body>

  <div> <h1>Section One</h1> </div>
  <div> <h1>Section Two</h1> </div>
  <div> <h1>Section Three</h1> </div>

</body>
</html>

Demo

CSS Snap Scroll Demo


Conclusion

From this post we learned

  • What is CSS Snap Scroll
  • How to implement a simple CSS Snap Scroll functionality

I hope this was helpful to you. And here is the link to the google's tutorial on CSS snap scrolling:

Google's Scroll Snap Tutorial


Tags: