CSS How to Snap to the Next Section on a Single Scroll
By Categories: CSS2 min read

This method works either on scroll up or on scroll down.

Normally, this is how you scroll down a webpage.
In this tutorial, I’m going to show you how to make a single scroll snap down into the next section.

Creating the Markup

First, let’s create our markup.

So there will be 3 sections in this example (you can add more if you want).
Next, I’m going to wrap these sections in a div with a class of wrapper.

Inside the first section, will be a heading and subheading text content.

The second will be a background image.

And the third one is a heading.

Adding the CSS Styles

For the wrapper div, add a 100 width and 100 view height which will take up all our screen dimensions.

For the first section, add a background.
Also, add a 100 width and 100 view height style to our section.

Using flex to center align the text content.

Remove the body’s default margin.
Add a default font family.

Add style to h1 tag and subheading.

The second section will be a background.

The third one is a section with a background and a heading text.

So, on the wrapper div element.
Add an “overflow-y scroll.”
Then scroll-snap-type:y mandatory.

Next, to the child section element, add a scroll snap align start.

Done, when I do the single scroll on the mouse wheel, it snaps right into the next section.

Example HTML Markup

 <div class="wrapper">
    <section class="one">
        <div class="content">
            <h1>The lemon, Citrus limon</h1>
            <p class="subheading">
                The lemon, Citrus limon, is a species of small evergreen tree in the flowering plant family Rutaceae, native to South Asia, primarily North eastern India
            </p>
        </div>
    </section>
    
    <section class="two">
    </section>
    
    <section class="three">
        <h2>Buy Your Lemons Now!</h2>
    </section>
    
</div>

CSS Styles

.wrapper {
   width: 100%;
   height: 100vh;
   overflow-y: scroll;
   scroll-snap-type: y mandatory;
}

.content {
   max-width: 800px;
}

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

.one {
   background: url(lemon-1.jpg) -10%/contain no-repeat;
}

h1 {
   font-size: 150px;
   line-height: 150px;
   color: #b7923a;
   margin: 0
}

h2 {
   font-size: 80px;
   color: #ae5db5
}

.subheading {
   color: #b7923a;
   font-size: 24px;
}

.two {
   background: url(lemon-dark.jpg) center/cover no-repeat;
}

.three {
   background: url(lemon-2.jpg) center/cover no-repeat;
}