Pure CSS Scroll Snapping

It’s a pure CSS scroll snapping plugin which builds only with CSS. It allows to automatically snaps your page section on the top when most of part of section element visible wtihin the viewport.

This feature allows developers to create well-controlled scrolling experience by defining the scrolling snaps positions. The plugin is based on the scroll-snap-align property.

The plugin is lightweight and easy to implement on any kind of HTML element. You simply need to define div or section element to implement it.

How to Use Scroll Snapping

You simply need to define different section on your web page with a unique ID. As we have added the following five different section.

<section id="section-A">
  <h1>This Is Section One</h1>
</section>
<section id="section-B">
  <h1>This Is Section Two</h1>
</section>
<section id="section-C">
  <h1>This Is Section Three</h1>
</section>
<section id="section-D">
  <h1>This Is Section Four</h1>
</section>
<section id="section-E">
  <h1>This Is Section five</h1>
</section>

Next, The CSS is also simple and easy to understand. We are going to use scroll-snap-type and we set the value y mandatory; on the body.

Also, make sure to add the scroller and for this, we will use the overflow-y

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

For each section, let’s define a different background to stand out. Make the text-align center and the height 100VH so its look beautiful.

For adding the snap scroll, Let’s define scroll-snap-align: start; and you are done.

#section-A{
    background-color:#24fe53;
    text-align: center;
    height: 100vh;
    scroll-snap-align:start;
}
#section-B {
    background-color: #fe3324;
    text-align: center;
    height: 100vh;
    scroll-snap-align:start;
}
#section-C {
    background-color: #7824fe;
    text-align: center;
    height: 100vh;
    scroll-snap-align:start;
}
#section-D {
    background-color: #2433fe;
    text-align: center;
    height: 100vh;
    scroll-snap-align:start;
}
#section-E {
    background-color: #fecb24;
    text-align: center;
    height: 100vh;
    scroll-snap-align:start;
}
#section-F {
    background-color: #fe24aa;
    text-align: center;
    height: 100vh;
    scroll-snap-align:start;
}