Scroll Snap Type Example

A pure CSS demo with scroll snap used for terreapinssky

by Terrapins Sky

HTML

<html>

  <head>
    <title>Scroll Snap Type Example</title>
  </head>

  <body>
    <div id="container">
      <div id="panel1" class="panel">
        <font>1</font>
      </div>
      <div id="panel2" class="panel">
        <font>2</font>
      </div>
      <div id="panel3" class="panel">
        <font>3</font>
      </div>
    </div>
  </body>
</html>

<!-- Demo: https://terrapinssky.blogspot.com/2021/07/cssexample-scroll-snap-type-example.html -->

CSS

body {
  margin: 0;
}

#container {
  overflow-y: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

.panel {
  height: 100%;
  scroll-snap-align: start;
  text-align: center;
}

.panel font {
  font-size: 72px;
  position: relative;
  top: 45%;
}

#panel1 {
  border-left: 30px solid red;
}

#panel2 {
  border-left: 30px solid green;
}

#panel3 {
  border-left: 30px solid blue;
}

JavaScript

// no javascript, pls check css and html