<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Scroll snap effect By Atul Prajapati</title>
</head>
<body>
  <div class="scroll-container" style="height: 100vh;">
    <section style="background: #2ed573"><h1>SECTION 1</h1></section>
    <section style="background: #1e90ff"><h1>SECTION 2</h1></section>
    <section style="background: #0fbcf9"><h1>SECTION 3</h1></section>
    <section style="background: #ff793f"><h1>SECTION 4</h1></section>
  </div>
</body>
</html>
*
{
  margin: 0;
  padding: 0;
}

.scroll-container
{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  overflow-x: hidden;
}

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

h1
{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .2em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.