html

<div class="container">
  <div class="hoge box"></div>
  <div class="fuga box"></div>
  <div class="piyo box"></div>
</div>

scss

.container {
  scroll-snap-type: y mandatory;
  /* 
  mandatory → 少しでもスクロールしたら次の要素にスナップ
  proximity → 半分までのスクロールは前の要素にスナップ + 半分の位置では停止 + 半分を超えると次の要素にスナップ 
  */
  overflow: auto;
  width: 100%;
  height: 100vh;
  .box {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    &.hoge {
      background-color: yellow;
    }
    &.fuga {
      background-color: green;
    }
    &.piyo {
      background-color: orange;
    }
  }
}