展示
垂直滚动 - normal
垂直滚动 - stop
自动滚动定位,使图片垂直中心位置在容器中间。
代码
CSS代码:
.scroll-y {
overflow: auto;
max-width: 300px;
height: 150px;
scroll-snap-type: y proximity;
}
.stop img {
scroll-snap-stop: always;
}
.scroll img {
scroll-snap-align: start;
}
HTML代码:
<h4>垂直滚动 - normal</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>垂直滚动 - stop</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>