scroll-snap

by NOVUSIDEA

HTML

<article class="viewer">
  <section class="slide">
    <h2>Introduction</h2>
    <p>Hello scroll-snap-type</p>
  </section>
  <section class="slide">
    <h2>Description</h2>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.</p>
    <p>The scroll-snap-type CSS property sets how strictly snap points are...

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-size: 26px;
}

.viewer {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.slide {
  width: 100vw;
  padding: 4rem;
  color: white;

  /* align center */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;

  /* scroll-snap */
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.slide:nth-child(1) {
  background-color: #F49592;
}

.slide:nth-child(2) {
  background-color: #00B1A0;
}

.slide:nth-child(3) {
  background-color: #F4A838;
}

.slide:nth-child(4) {
  background-color: #8F93B7;
}