web前端入门到实战：CSS 滚动捕捉技术（Scroll Snapping）

CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置。非常适合用来建立下面这样的应用：

基本使用

实现滚动捕捉主要依靠两个属性：容器元素的 scroll-snap-type 属性，以及子元素的 scroll-snap-align 属性。最基本的使用方式如下：

专门建立的学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<div class="container">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
  <p>...</p>
</div>

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

第一版中定义的属性与此不同，是通过 repeat 关键字实现的。

.container {
  /* OLD */
  scroll-snap-points-y: repeat(300px);
}

这种定义捕捉的方式很局限，只在间距均匀的捕捉点（evenly-spaced snap points）场景下有效，如果个别子元素尺寸与其他的不一样，就会有问题。

在撰写本文时，Firefox、Internet Explorer 和 Edge 都支持较早版本的规范，而 Chrome（69+）和 Safari 支持较新的基于元素（element-based）的方法。

你可以同时使用这两种方法（如果布局允许），以便支持这两类浏览器：

.container {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
}

.child {
  scroll