CSS 滚动捕获 Scroll Snap
CSS
滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图 A
或者图 B
, 而不能停在 A
和 B
的中间.
比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为
CSS
属性概览
下面两个属性是定义在滚动容器上的
scroll-snap-type
: 定义滚动容器是否可以捕获、捕获是必须的还是可选的、捕获应该发生在横向滚动还是纵向滚动上.scroll-padding
: 定义滚动容器的捕获偏移.
下面三个属性是定义在滚动容器中的元素上的
scroll-snap-align
: 滚动容器的子元素和滚动容器对齐方式, 顶部对齐、中间对齐还是底部对齐scroll-margin
: 滚动容器的子元素的滚动margin
.scroll-snap-stop
: 是否允许滑动超过应该捕获的位置. 比如当前屏幕是A
, 在手机屏幕上滑动很长的距离, 是否可以快速划过很多元素(B/C/D/E…)还是一定会停在下一个B
.
一些个专有名词
有兴趣的可以来读