scroll-snap-align

scroll-snap-align 是 CSS 滚动捕捉模块的一部分。 滚动捕捉是指在窗口（或可滚动容器）滚动时将视窗的位置“锁定”到页面上的特定元素。 可以将滚动捕捉容器想象成在元素顶部放一个磁铁，该磁铁粘贴到视窗的顶部并强制页面停止滚动。

scroll-snap-align 是滚动捕捉容器中滚动捕捉元素的必需属性。 有关滚动捕捉容器的更多信息，请参见 scroll-snap-type 年鉴条目。 scroll-snap-align 告诉浏览器当遇到捕捉点时元素的哪个部分应该对齐：元素应该捕捉到包含 scroll-snap-type 属性的父容器的 start、center 还是 end？

如果您希望元素捕捉到该元素的开头，请为其赋予 scroll-snap-align 值，如下所示

/* Assuming this element is a child of a container with `scroll-snap-type` set */
.element {
  scroll-snap-align: start;
}

语法

scroll-snap-align: [ none | start | end | center ]{1,2}

您可以为该属性指定最多 2 个值，分别代表块轴和内联轴。 如果您只提供 1 个值，则该值将用于两个轴。

值

scroll-snap-align 接受以下值

• none 禁用元素上的滚动捕捉
• start 在捕捉到位时将元素的开始与滚动容器的捕捉点对齐
• end 在捕捉到位时将元素的结束与滚动容器的捕捉点对齐
• center 在捕捉到位时将元素的中心与滚动容器的捕捉点对齐

示例

浏览器支持

相关

• scroll-snap-type
• scroll-margin
• scroll-padding
• scroll-snap-stop

资源

• CSS 滚动捕捉 W3C 候选推荐
• 实用 CSS 滚动捕捉
• 介绍 CSS 滚动捕捉点