JSFiddle - React, Tailwind, and code Playground

by skanehira

HTML

<div class="search">
  検索メニュー
</div>
<div class="container">
  <section class="area">1</section>
  <section class="area">2</section>
  <section class="area">3</section>
  <section class="area">4</section>
  <section class="area">5</section>
</div>

CSS

.search {
  height: 30vh;  
}

.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
}

/* General Styling */
body {
  font-size: 4rem;
  text-align: center;
  color: #fff;
}
.area:nth-child(even) {
  background-color: #0db;
}
.area:nth-child(odd) {
  background-color: #0bd;
}