Create Beautiful Snap Scrolling with CSS Scroll Snap

Have you ever wanted to build a website that allows you to jump straight to a specific section on the page with a single scroll? (See the GIF below for a demonstration):

Thanks to the CSS Scroll Snap feature, this behavior is super easy to achieve.

Learn everything you need to know about CSS scroll snap, including its various properties and unique scroll snap effects. By the end of this article, you’ll have all the information you need to implement this sleek behavior in your own websites.

Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, I strongly recommend HTML to React: The Ultimate Guide.

Setting up the page

Create a file named index.html in an empty folder. Then open this folder with a text editor and paste in the following markup:

 lang="en">

    
     rel="stylesheet" href="style.css">


    
    

        

            
Page 1
            
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae rerum fugit ad quos ipsa consequatur quidem doloribus necessitatibus, temporibus exercitationem porro. Itaque velit sapiente unde dolor alias libero iste. Modi quam numquam expedita iste saepe voluptates id inventore, aliquid sint in culpa.
        
        
    

We have a div element that contains five individual sections. Each section has an H2 (which has the title of the page) and some paragraph text.

To keep things short, I excluded the last four sections in the sample HTML. Copy and paste the first section four places down, then simply change the title to Page 2, Page 3, etc.

Now to style the page, create a file named style.css in the same folder as index.html and paste the following CSS markup:

h2 {
    font-size: 40px;
}

p {
    font-size: 30px;
}

nav {
    display: none;
    height: 30px;
    text-align: center;
    padding: 4px;
    font-size: 30px;
}

section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
}

.one {
    background-color: #ADD8E6;
}

.two {
    background-color: #FFC0CB;
}

.three {
    background-color: yellow;
}

.four {
    background-color: #CBC3E3;
}

.five {
    background-color: orange;
}

We hid the navigation area by default and gave each section a unique background color.

Here’s the result:

From the above GIF, you can see that we’re slowly gliding down as we drag the scrollbar. Let’s change this by bringing in the CSS scroll snap property.

Scroll Snapping Basics

Essentially, there are two things needed to implement scroll snap: the container that you’re going to be scrolling inside and the actual “scrollable” elements themselves.

In our case, the element is the container, which is why we define the scroll-snap-style directly on it:

html {
  scroll-snap-type: mandatory; 
}

The scroll-snap-type property supports three values:

• none: This is the default, there’s no scroll-snapping

• mandatory: Snaps to the next section each time you scroll

• proximity: Scrolls normally, but once you stop scrolling, it jumps you to the nearest section

If you save your file and check your browser, you’ll notice that the scroll-snap-type declaration is not doing anything.

That’s because you still need to specify the direction you want to snap to and how you want to scroll snap to happen. So add the following CSS markups to style.css:

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

section {
  /* Other CSS rules */
  scroll-snap-align: start;
}

x is for horizontal scrolling, y is for vertical, and both is for snapping in both directions. In our case, we’re scrolling it in the vertical direction, which is y. By adding the scroll-snap-align: start on the section element, we’re telling CSS to snap to the start of the element each time (rather than the end or middle of it).

Now when you save the file and check your browser, you’ll notice that whenever you scroll down or up with the scrollbar, it jumps you straight to the next section.

Scroll Snap Advanced Features

CSS Scroll Snap has a lot of properties for customizing your scroll behavior. But the two you’ll be using a lot in your project are scroll-snap-stop and scroll-padding.

The scroll-snap-stop property is useful when designing for mobile devices. When set to always, it forces the scroll to stop no matter how big you scroll your mobile screen:

section {
  /* Other CSS rules */
  scroll-snap-stop: always;
}

This prevents you from skipping past a bunch of things because it’s actually going to stop on the next page no matter how big your scroll is.

Next is scroll-padding. You can use scroll-padding in the scroll container (the HTML tag, in our case) to add some padding between the scroll elements and the container’s margins.

This is useful if you have an element over the top of your page (e.g. a navigation menu or heading) that you don’t want to clash with the scroll items. In the following example, since we have a navigation area that is 30px tall, we have to add scroll-padding-top of 30px:

html {
  scroll-snap-type: y mandatory;
  /* Add the following: */
  scroll-padding-top: 30px;
} 

From the GIF below, you can see that each section is moved 30px down from the very top to accommodate the navigation element.

Conclusion

CSS Scroll Snap enables you to specify how scrolling will snap to specific positions as the user scrolls through the document. It also includes features to better customize your scroll behavior, such as specifying how to snap and padding between the container and scroll elements.

If you’re new to learning JavaScript, and you’re looking for the best resource to help with that, check out HTML to React: The Ultimate Guide.