滚动捕捉
滚动吸附(Scroll snapping)是指当滚动操作结束时,内容会“吸附”到一个特定的位置,而不是停在任意一个点。普通的滚动操作缺乏精确性,它们不会自动与段落、句子或图像的边界对齐。例如,在轮播图中,滚动操作可能会在图像中间结束,导致图像部分可见。长期以来,Web 开发者一直依赖于基于 JavaScript 的解决方案。最近,浏览器开始支持 CSS 滚动吸附特性,它允许定义滚动吸附容器和吸附行为。
滚动吸附是一种控制良好的滚动体验,开发者可以将一个元素定义为滚动容器,并为滚动操作设定边界。然后,滚动操作会在这些吸附位置边界处结束,滚动到的内容会吸附到位。在上述轮播图的例子中,当用户结束滚动轮播图时,其可见的图像就会吸附到位。
- 滚动吸附容器
-
滚动吸附容器(scroll snap container)是一个应用了滚动吸附的滚动容器。例如,如果一个盒子有溢出内容,并且其
scroll-snap-type
属性值不为none
,那么这个盒子就会捕获吸附位置。一个盒子的滚动吸附容器是其最近的、捕获吸附位置的滚动容器祖先。如果一个盒子没有滚动吸附容器,那么它的吸附位置(即使有)也不会触发吸附效果。 - 吸附口
-
吸附口(snapport)是滚动端口中用于在计算吸附位置时作为滚动吸附区域的对齐容器的区域。默认情况下,它与滚动容器的可视视口相同,但它也可以是由
scroll-padding
属性定义的滚动端口区域。吸附区域会对齐到吸附口。 - 吸附区域
-
滚动容器中元素的吸附区域(snap area)是由该元素上指定的
scroll-margin
外边距定义的区域。吸附区域用于将元素吸附到其吸附口。 - 吸附目标
-
滚动吸附容器内的一个后代元素,当容器滚动时,该元素会被吸附。
scroll-snap-align
属性定义了每个吸附目标的吸附位置。