<section class="section section-1">Seção 1</section>
<section class="section section-2">Seção 2</section>
<section class="section section-3">Seção 3</section>
<section class="section section-4">Seção 4</section>
<section class="section section-5">Seção 5</section>
<section class="section section-6">Seção 6</section>
<section class="section section-7">Seção 7</section>
<section class="section section-8">Seção 8</section>
html {
  scroll-snap-type: y mandatory;
}

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

.section {
  scroll-snap-align: start;
  height: 70vh;

  /* unrelated visual styling */
  color: white;
  font-size: 30px;
  font-weight: bold;
  padding: 40px;
  box-sizing: border-box;
}

.section-1 {
  background: #3182ce;
}

.section-2 {
  background: #805ad5;
}

.section-3 {
  background: #38a169;
}

.section-4 {
  background: #63b3ed;
}

.section-5 {
  background: #ed8936;
}

.section-6 {
  background: #38b2ac;
}

.section-7 {
  background: #ecc94b;
}

.section-8 {
  background: #f56565;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.