CSS scroll-snap-stop属性值作用对比实例页面

回到相关文章 »

展示

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