水平滚动捕捉

Beginner

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

水平滚动捕捉

虚拟机中已经提供了 index.htmlstyle.css

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

  1. 使用 display: gridgrid-auto-flow: column 创建水平布局。
  2. 使用 scroll-snap-type: x mandatoryoverscroll-behavior-x: contain 在水平滚动时创建捕捉效果。
  3. scroll-snap-align 更改为 startstopcenter 以调整捕捉对齐方式。

以下是你可以使用的示例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”标签页来预览网页。

总结

恭喜你!你已经完成了水平滚动捕捉实验。你可以在LabEx中练习更多实验来提升你的技能。