scroll-snap-* 属性。

以下示例是带有 overflow-scrolling 的 div 元素。在第二、第三和第四个示例中，蓝色十字代表了每个容器的滚动吸附目标位置。

第一个容器不具有任何滚动吸附行为。

1

2

3

4

第二个容器展示了基础滚动吸附的效果。

1

2

3

4

上述容器的 CSS 代码如下

scroll-snap-type: x mandatory;

每个容器子元素的 CSS 代码如下

scroll-snap-align: start;

下一个容器在滚动时会吸附到不同大小的元素。

1

2

3

4

5

6

7

上述容器的 CSS 代码如下

scroll-snap-type: x mandatory;

每个容器子元素的 CSS 代码如下

scroll-snap-align: start;

这里，我们将不同大小的元素吸附到容器中心。

1

2

3

4

5

6

7

上述容器的 CSS 代码如下

scroll-snap-type: x mandatory;

每个容器子元素的 CSS 代码如下

scroll-snap-align: center;

这个容器展示了二维网格中的居中滚动吸附。

上述容器的 CSS 代码如下

scroll-snap-type: both mandatory;

每个容器子元素的 CSS 代码如下

scroll-snap-align: center;

这个示例基于上面的二维滚动吸附网格，并将其旋转了 30 度。

上述容器的 CSS 代码如下

scroll-snap-type: both mandatory;
transform: rotate(30deg);

每个容器子元素的 CSS 代码如下

scroll-snap-align: center;

图片来自 NASA 的每日一图图库。