展示
垂直滚动 - 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>