CSS Scroll Snap

css-scroll-snap.markdown

CSS Scroll Snap

A Pen by Marko on CodePen.

License.

index.html

<div class="wrapper">
  <div class="section">
    Content 1
  </div>
  
  <div class="section bg-blue">
    Content 2
  </div>
  
  <div class="section bg-green">
    Content 3
  </div>
  
  <div class="section">
    Content 4
  </div>
  
  <div class="section bg-blue">
    Content 5
  </div>
</div>

scripts

<script src="https://codepen.io/denic/pen/YzyPzKG.js"></script>

style.css

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #de5448;
  color: #fff;
  font-size: 3em;
}

.bg-blue {
  background: #4267b2;
}

.bg-green {
  background: #4CAF50;
}

styles

<link href="https://codepen.io/denic/pen/YzyPzKG.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />