<div>
    <p1>Section 1</p1>
  </div>
  <div>
    <p2>Section 2</p2>
  </div>
  <div>
    <p3>Section 3</p3>
  </div>
  <div>
    <p4>Section 4</p4>
  </div>
  <div>
    <p5>Section 5</p5>
  </div>
  <div>
    <p6>Section 6</p6>
  </div>
  <div>
    <p7>Section 7</p7>
  </div>
  <div>
    <p8>Section 8</p8>
  </div>
html{
  scroll-snap-type:y mandatory;
}

div{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#eeeeee;
  border-bottom:1px solid white;  
  scroll-snap-align: center;
}

div:nth-child(odd){
  background:#17191f;
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.