展示
垂直滚动 - mandatory
垂直滚动 - proximity
自动滚动定位，使图片垂直中心位置在容器中间。
代码
CSS代码：
.scroll {
overflow: auto;
}
.scroll-x {
white-space: nowrap;
scroll-snap-type: x mandatory;
}
.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;
}
HTML代码：
<h4>垂直滚动 - mandatory</h4>
<div class="scroll scroll-y mandatory">
<img src="./mm.jpg">
<img src="./mm2.jpg">
<img src="./mm3.jpg">
<img src="./mm4.jpg">
<img src="./mm5.jpg">
</div>
<h4>垂直滚动 - proximity</h4>
<div class="scroll scroll-y proximity">
<img src="./mm.jpg">
<img src="./mm2.jpg">
<img src="./mm3.jpg">
<img src="./mm4.jpg">
<img src="./mm5.jpg">
</div>