css元素捕捉,图解CSS：CSS滚动捕捉（Part1）

CSS 滚动捕捉是 W3C 中

简介

CSS 滚动捕捉(CSS Scroll Snap)规范为我们提供了一种方法，可以在用户滚动浏览文档时，将其滚动到特定的点(位置)。这对于在移动设备上甚至在PC端上为某些类型的应用程序(比如滑块组件)创造一个更类似于应用程序(原生客户端)的体验是很有帮助的。

简而言之，CSS 滚动捕捉可以：

防止滚动时出现尴尬的滚动位置

创建更好的滚动体验

CSS 滚动捕捉可能涉及到的知识如下图所示：

基础知识

在开始聊 CSS 滚动捕捉之前，先花一点时间来了解一些基础知识，这样有利于大家更易于理解我们今天要理解的 CSS 滚动捕捉。

容器

在 CSS 的世界中，任何一个 HTML 元素都是一个盒子(Box)，盒子的概念是一个抽象的概念，由 CSS 引擎根据文档中的内容所创建，主要用于元素的定位、布局和格式化等用途。在 CSS 中时常用 盒模型 来描述盒子的具体参数：

盒子之间的类型可以使用 CSS 的 display 属性的不同值来进行切换。也就是说，使用 display 属性来格式化盒子，即创建不同的盒子，好比类似下图这样的器皿：

使用 display 属性格式化盒子之时就给不同的盒子使用了不同的

在 CSS 中，每个盒子又被称之为 容器。其主要用来放置内容。正如《图解CSS: 元素尺寸的设置》所介绍的一样可以使用内部尺寸(比如 min-content 和 max-content)和外部尺寸(比如 width、height等)属性来设置容器的大小。更多的开发者还是比较喜欢使用外部尺寸来描述一个容器的大小：

上表中的外部尺寸属性涵盖了物理属性和逻辑属性，有关于 CSS 逻辑属性更多的介绍可以阅读《图解CSS：CSS逻辑属性》一文。

另外 CSS 盒模型中的 padding、border-width 的值也将会影响一个容器的大小，同时 CSS 的 box-sizing 属性也会影响容器大小的计算：

容器空间

容器的空间实际上指的就是容器的大小，它分为可用空间和不可用空间，我们用下图来描述容器的可用空间和不可用空间：

滚动容器

正如容器空间中给大家示意的图片，我们在构建布局的时候，容器中的内容有可能会溢出容器，有可能不会溢出容器。但在容器中显式的设置 overflow 的值为 auto 或 scroll 属性值时可以创建滚动容器。比如：

.container {

overflow: auto;

width: 50vw;

}

当 overflow 取值为 auto 时，只有当内容溢出容器时才会创建滚动容器；当 overflow 取值为 scroll 时，不管内容是否溢出容器都会创建滚动容器。比如下面这个示例，在容器 .container 中显式设置了 overflow-x: auto;，当内容溢出容器时，就创建了一个滚动容器：

滚动容器的轴线

滚动容器的轴表示滚动容器的滚动方向，它可以是水平或垂直的，x 值表示水平滚动，而 y 表示垂直滚动。CSS的 overflow 属性有两个子属性，分别对应的是 x 轴和 y轴：

水平滚动，overflow-x 的值为 auto 或 scroll

垂直滚动，overflow-y 的值为 auto 或 scroll

但 overflow-x 和 overflow-y 只是分别表示水平方向和垂直方向有可能会有滚动条出现，但并没有滚动轴线的概念。只在 CSS 滚动捕捉特性出现之后，才有了滚动容器的轴线，即使用 scroll-snap-type 属性指定的值，相当于指定了滚动容器的轴线：

/* 水平滚动轴线 */

.container-x {

overflow-x: auto; /* 或 scroll*/

scroll-snap-type: x;

}

/* 垂直滚动轴线 */

.container-y {

overflow-y: auto; /* 或 scroll */

scroll-snap-type: y;

}

我们还没开始介绍 scroll-snap-type 属性，不知道其具体的含义和作用并不重要，你只需要知道它是 CSS 滚动捕捉中的一个特性即可，后面将会详细介绍这个属性。

捕捉

使用过类似 AutoCAD 软件的同学应该有这样的印象，在屏幕中绘制图形时，移动一个对象时，对象总能自动吸附在栅格线上，使得对象只能落在栅格上的确定位置上，这就是 栅格捕捉。或者这样说，在