简介
在本实验中，我们将深入探讨 CSS 编程的世界，探索其各种特性和功能。本实验的目的是让学习者掌握使用 CSS 创建视觉上吸引人且响应式网页所需的技能。通过实践操作和实验，学习者将对 CSS 语法、选择器、属性等有扎实的理解。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
垂直滚动捕捉
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版
垂直滚动捕捉
虚拟机中已经提供了 index.html 和 style.css。
这段代码创建了一个可滚动的容器，在滚动时会捕捉到各个元素。为实现此效果，采取了以下步骤：
- 使用
display: grid和grid-auto-flow: row创建垂直布局。 - 使用
scroll-snap-type: y mandatory和overscroll-behavior-y: contain在垂直滚动时创建捕捉效果。 - 可以使用
scroll-snap-align并搭配start、stop或center来更改捕捉对齐方式。
以下是 HTML 和 CSS 代码：
<div class="vertical-snap">
<a href="#"><img src="https://picsum.photos/id/1067/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/122/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/188/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/249/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/257/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/259/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/283/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/288/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/299/640/640" /></a>
</div>.vertical-snap {
margin: 0 auto;
display: grid;
grid-auto-flow: row;
gap: 1rem;
width: calc(180px + 1rem);
padding: 1rem;
height: 480px;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
}
.vertical-snap > a {
scroll-snap-align: center;
}
.vertical-snap img {
width: 180px;
object-fit: contain;
border-radius: 1rem;
}请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了垂直滚动捕捉实验。你可以在 LabEx 中练习更多实验来提升你的技能。
