CSS Scroll Snap基本效果示意实例页面
展示
![](../images/wallpaper-1.jpg)
![](../images/wallpaper-2.jpg)
![](../images/wallpaper-3.jpg)
![](../images/wallpaper-4.jpg)
代码
-
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; }