css：scroll-snap实现滚动贴合

demo地址：https://mouday.github.io/front-end-demo/scroll-snap.html

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>