css：scroll-snap实现滚动贴合

<style>
    * {
      margin: 0;
      padding: 0;
    }
    /* 父容器 */
    .contaner {
      scroll-snap-type: y mandatory;
      height: 100vh;
      overflow: scroll;
    }
    .section {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
    }
    .section-1 {
      background-color: #cca4e3;
    }
    .section-2 {
      background-color: #1685a9;
    }
    .section-3 {
      background-color: #4b5cc4;
    }
    .section-4 {
      background-color: #8d4bbb;
    }
  </style>
  <div class="contaner">
    <div class="section section-1">1</div>
    <div class="section section-2">2</div>
    <div class="section section-3">3</div>
    <div class="section section-4">4</div>
  </div>