scroll-snap-align

基线 广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2019 年 7 月.

scroll-snap-align 属性指定框的捕捉位置，作为其捕捉区域（作为对齐主体）在其捕捉容器的捕捉视窗（作为对齐容器）内的对齐方式。

试一试

语法

css
/* Single keyword value */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;

/* Two keyword values */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;

/* Global values */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

值

可以为 scroll-snap-align 属性指定一个或两个值。如果设置一个值，则将其应用于块轴和内联轴。如果设置两个值，则第一个值控制块轴，第二个值控制内联轴。

none

该框在该轴上没有定义捕捉位置。

start

该框的滚动捕捉区域的起始对齐方式，在滚动容器的捕捉视窗内是该轴上的捕捉位置。

end

该框的滚动捕捉区域的结束对齐方式，在滚动容器的捕捉视窗内是该轴上的捕捉位置。

center

该框的滚动捕捉区域的中心对齐方式，在滚动容器的捕捉视窗内是该轴上的捕捉位置。

正式定义

初始值none
适用于所有元素
继承否
计算值按指定
动画类型离散

正式语法

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

规范

规范
CSS 滚动捕捉模块级别 1
# scroll-snap-align

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见