您是否曾经想构建一个网站，该网站可以直接跳到页面上的特定部分？ （有关演示，请参见下面的GIF）：
多亏了CSS卷轴快照功能，此行为非常容易实现。
了解有关CSS卷轴快照的所有信息，包括其各种属性和独特的卷轴效果。到本文结尾，您将拥有在自己的网站中实施这种时尚行为所需的所有信息。
Sidenote：如果您是学习Web开发的新手，并且您正在寻找最佳资源来帮助这一点，我强烈建议HTML to React: The Ultimate Guide。
设置页面
在空文件夹中创建一个名为 index.html 的文件。然后用文本编辑器打开此文件夹，然后在以下标记中粘贴：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll Snap Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>Heading</nav>
<div>
<section>
<h2>Page 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae rerum fugit ad quos ipsa consequatur quidem doloribus necessitatibus, temporibus exercitationem porro. Itaque velit sapiente unde dolor alias libero iste. Modi quam numquam expedita iste saepe voluptates id inventore, aliquid sint in culpa.</p>
</section>
<!-- Add four other sections here -->
</div>
</body>
</html>
我们有一个 div 元素，其中包含五个单个部分。每个部分都有一个H2（具有页面的标题）和一些段落文本。
为了使情况保持短缺，我排除了示例HTML中的最后四个部分。复制并粘贴第四节第四部分，然后只需将标题更改为第2页，第3页等
现在要样式页面，创建一个名为 style.css 在与 index.html 的文件夹中，然后粘贴以下CSS标记：
h2 {
font-size: 40px;
}
p {
font-size: 30px;
}
nav {
display: none;
height: 30px;
text-align: center;
padding: 4px;
font-size: 30px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
}
.one {
background-color: #ADD8E6;
}
.two {
background-color: #FFC0CB;
}
.three {
background-color: yellow;
}
.four {
background-color: #CBC3E3;
}
.five {
background-color: orange;
}
我们默认掩盖了导航区域，并给每个部分带有唯一的背景颜色。
这是结果：
从上面的gif中，您可以看到，当我们拖动卷轴时，我们会慢慢滑动。让我们通过引入CSS卷轴快照属性来改变这一点。
滚动捕捉基础知识
本质上，实现滚动式快照需要两件事：您将要在里面滚动的容器和实际可滚动的元素本身。
在我们的情况下，<html>元素是容器，这就是为什么我们直接在其上定义滚动式扣子式：
html {
scroll-snap-type: mandatory;
}
scroll-snap-type 属性支持三个值：
-
无：这是默认值，没有卷轴扣
-
强制性：每次滚动时，都会在下一部分
-
接近：正常滚动，但是一旦您停止滚动，它就会跳到最近的部分
如果您保存文件并检查浏览器，您会注意到 scroll-snap-type 声明无需做任何事情。
这是因为您仍然需要指定要捕捉的方向以及如何滚动快照发生。因此，将以下CSS标记添加到 style.css ：
html {
scroll-snap-type: y mandatory;
}
section {
/* Other CSS rules */
scroll-snap-align: start;
}
x用于水平滚动，y用于垂直，both用于朝两个方向折断。就我们而言，我们将其沿垂直方向滚动，即y。通过在截面元素上添加scroll-snap-align: start，我们告诉CSS每次（而不是其末端或中间）捕捉到元素的开始。
现在，当您保存文件并检查浏览器时，您会注意到，每当您向下滚动或使用滚动条向上时，它都会直接跳到下一节。
滚动快照高级功能
CSS卷轴快照具有许多用于自定义滚动行为的属性。但是，您将在项目中使用的两者是滚动式和卷轴。
scroll-snap-stop 在设计移动设备时属性很有用。设置为始终，无论您的移动屏幕滚动多大，它都会迫使滚动停止：
section {
/* Other CSS rules */
scroll-snap-stop: always;
}
这会阻止您跳过一堆东西，因为无论您的滚动多大，它实际上都会停在下一页上。
接下来是滚动垫。您可以在滚动容器（在我们的情况下）在滚动容器中使用滚动垫，以在滚动元素和容器边缘之间添加一些填充。
，如果您在页面顶部（例如导航菜单或标题）上有一个元素，那么您不想与滚动项发生冲突。在下面的示例中，由于我们的导航区域高30px，因此我们必须添加30px的scroll-padding-top：
html {
scroll-snap-type: y mandatory;
/* Add the following: */
scroll-padding-top: 30px;
}
从下面的GIF中，您可以看到每个部分都从最高顶部移动30px以容纳导航元件。
结论
css滚动快照使您可以指定在用户滚动文档滚动时，滚动将如何转到特定位置。它还包括更好地自定义滚动行为的功能，例如指定如何在容器和滚动元素之间捕捉和填充。
如果您是熟悉JavaScript的新手，并且您正在寻找最佳的资源来帮助这一点，请查看HTML to React: The Ultimate Guide。