CSS Scroll Snap基本效果示意实例页面

展示

代码

• HTML：

  <div class="scroll-x">
      <img src="../images/wallpaper-1.jpg">
      <img src="../images/wallpaper-2.jpg">
      <img src="../images/wallpaper-3.jpg">
      <img src="../images/wallpaper-4.jpg">
  </div>

• CSS：

  .scroll-x {
      max-width: 414px; height: 420px;
      margin: auto;
      scroll-snap-type: x mandatory;
      white-space: nowrap;
      overflow: auto;
  }
  .scroll-x img {
      width: 300px; height: 400px;
      scroll-snap-align: center;
  }