CSS Only Scroll Snapping – snapy_scroll

Preview:

Description:

snapy_scroll is a pure CSS scroll snipping library which automatically snaps your page section to the top when most part of the section is visible within the viewport.

Based on the CSS scroll-snap-align property.

Ideal for providing a smooth and user-friendly scroll experience on your one-page scrolling website.

How to use it:

Create page sections as follows:

<section id="section-one">
  <h1>This Is Section One</h1>
</section>
<section id="section-two">
  <h1>This Is Section Two</h1>
</section>
<section id="section-three">
  <h1>This Is Section Three</h1>
</section>
<section id="section-four">
  <h1>This Is Section Four</h1>
</section>
<section id="section-five">
  <h1>This Is Section five</h1>
</section>

The CSS tricks to make the page sections fullscreen and apply the scroll snapping functionality to the page sections while scrolling.

body{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
#section-one{
  background-color:#24fe53;
  text-align: center;
  height: 100vh;
  scroll-snap-align:start;
}
#section-two {
  background-color: #fe3324;
  text-align: center;
  height: 100vh;
  scroll-snap-align:start;
}
#section-three {
  background-color: #7824fe;
  text-align: center;
  height: 100vh;
  scroll-snap-align:start;
}
#section-four {
  background-color: #2433fe;
  text-align: center;
  height: 100vh;
  scroll-snap-align:start;
}
#section-five {
  background-color: #fecb24;
  text-align: center;
  height: 100vh;
  scroll-snap-align:start;
}