偶然间看到一个用CSS
写的滚动式日期选择组件,里面有个很有趣的效果,不论怎么滚动,必定会出现一组恰好在指定位置的数据,在印象里,CSS
是无法操控滚动行为的。
检察元素发现了一个有趣的属性scroll-snap-type
,MDN
解释为用于滚动容器,说明滚动的类型和方向。
既然如此,它是否可以制作全屏滚动效果呢?
.parent {
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.child {
scroll-snap-align: start;
height: 100vh;
}