简介
在本实验中,我们将探索CSS中水平滚动捕捉的概念。本实验将指导你创建一个水平可滚动的容器,该容器在滚动时会捕捉到元素。你将学习如何使用 scroll-snap-type
属性和 scroll-snap-align
来创建捕捉效果,以及如何控制捕捉的对齐方式。在实验结束时,你将很好地理解如何创建一个简洁且用户友好的水平滚动布局。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探索CSS中水平滚动捕捉的概念。本实验将指导你创建一个水平可滚动的容器,该容器在滚动时会捕捉到元素。你将学习如何使用 scroll-snap-type
属性和 scroll-snap-align
来创建捕捉效果,以及如何控制捕捉的对齐方式。在实验结束时,你将很好地理解如何创建一个简洁且用户友好的水平滚动布局。
虚拟机中已经提供了 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”标签页来预览网页。
恭喜你!你已经完成了水平滚动捕捉实验。你可以在LabEx中练习更多实验来提升你的技能。