掌握 CSS 中的水平滚动捕捉

简介

在本实验中，我们将探索 CSS 中水平滚动捕捉的概念。本实验将指导你创建一个水平可滚动的容器，该容器在滚动时会捕捉到元素。你将学习如何使用 scroll-snap-type 属性和 scroll-snap-align 来创建捕捉效果，以及如何控制捕捉的对齐方式。在实验结束时，你将很好地理解如何创建一个简洁且用户友好的水平滚动布局。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 86% 的好评率。

水平滚动捕捉

虚拟机中已经提供了 index.html 和 style.css。

要创建一个水平可滚动的容器，使其在滚动时捕捉到元素，请按照以下步骤操作：

使用 display: grid 和 grid-auto-flow: column 创建水平布局。
使用 scroll-snap-type: x mandatory 和 overscroll-behavior-x: contain 在水平滚动时创建捕捉效果。
将 scroll-snap-align 更改为 start、stop 或 center 以调整捕捉对齐方式。

以下是你可以使用的示例 HTML 和 CSS 代码：

HTML

<div class="horizontal-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>

CSS

.horizontal-snap {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  height: calc(180px + 1rem);
  padding: 1rem;
  max-width: 480px;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.horizontal-snap > a {
  scroll-snap-align: center;
}

.horizontal-snap img {
  width: 180px;
  max-width: none;
  object-fit: contain;
  border-radius: 1rem;
}

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

水平滚动捕捉

简介

水平滚动捕捉

总结