mandatory和proximity对比实例页面

展示

代码

• HTML：

  <section>
      <h4>垂直滚动 - mandatory</h4>
      <div class="scroll scroll-y mandatory">
          <img src="wallpaper-1.jpg">
          <img src="nature-1.jpg">
          <img src="wallpaper-3.jpg">
          <img src="nature-2.jpg">
      </div>
  </section>
  <section>
      <h4>垂直滚动 - proximity</h4>
      <div class="scroll scroll-y proximity">
          <img src="wallpaper-1.jpg">
          <img src="nature-1.jpg">
          <img src="wallpaper-3.jpg">
          <img src="nature-2.jpg">
      </div>
  </section>

• CSS：

  .scroll {
      overflow: auto;
  }
  .scroll-y {
      max-width: 300px;
      height: 150px;
  }
  .mandatory {
      scroll-snap-type: y mandatory;
  }
  .proximity {
      scroll-snap-type: y proximity;
  }
  .scroll img {
      scroll-snap-align: center;
  }