0Pricing
CSS Academy · 课时

scroll-snap-type 与 scroll-snap-align

使用 CSS 滚动捕捉属性创建轮播和分页式滚动体验。

scroll-snap-type 与 scroll-snap-align 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 CSS 滚动捕捉？

CSS 滚动捕捉允许可滚动容器在滚动后“捕捉”到特定位置，从而无需 JavaScript 即可创建受控的分页和轮播行为。

容器上的 scroll-snap-type

在可滚动容器上启用捕捉：

  <div class="carousel">
    <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  </div>

scroll-snap-type 的值

由两部分组成：

  • 轴：x、y 或 both
  • 严格程度：mandatory（始终捕捉）或 proximity（接近捕捉点时才捕捉）
  <div class="paged">Paged container</div>
  <div class="freeform">Freeform container</div>

项目上的 scroll-snap-align

定义每个子元素在容器中捕捉的位置：

  <div class="carousel-demo">
    <div class="carousel-item">1</div><div class="carousel-item">2</div>
  </div>

全屏页面捕捉

一个按垂直方向分页的全屏区块布局：

  <div class="sections">
    <div class="section">Section 1</div><div class="section">Section 2</div>
  </div>

水平轮播捕捉

一个带有捕捉效果的水平卡片轮播：

  <div class="carousel">
    <div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
  </div>

scroll-snap-stop

scroll-snap-stop: always 可以防止快速滚动跳过捕捉点。用户每次滚动手势最多只能跳过一个项目。

  <div class="slider">
    <div class="slide">1</div><div class="slide">2</div>
  </div>

scroll-snap-margin 与 scroll-padding

可以在项目上（scroll-margin）或容器上（scroll-padding）偏移捕捉位置：

  <div class="carousel">Carousel container</div>

overscroll-behavior

overscroll-behavior: contain 可以防止滚动链——当容器到达滚动边界时，页面也不会随之滚动：

  <div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>

可访问性注意事项

捕捉式轮播仍应支持键盘操作。箭头键应在捕捉点之间移动。请添加 ARIA 轮播角色和标签。通过 JavaScript 以编程方式滚动时，也应遵循相同的捕捉点。

CSS 轮播与 JS 轮播

CSS 滚动捕捉无需 JavaScript 即可处理大多数基本轮播需求：捕捉到目标点、隐藏滚动条和内边距对齐。如果需要圆点指示器、带动画过渡的上一个/下一个按钮，或复杂的可访问性管理，请使用 JS 库。

快速检查

scroll-snap-type 的哪个值可以确保容器始终准确停在捕捉点上，而不会停在两个捕捉点之间？

回顾

CSS 滚动捕捉可以创建分页和轮播行为。在容器上设置 scroll-snap-type: x mandatory，在项目上设置 scroll-snap-align: start。使用 scroll-snap-stop: always 防止跳过捕捉点。结合 overscroll-behavior: contain 防止滚动链。使用 scrollbar-width: none 隐藏滚动条，以获得简洁的视觉效果。

常见问题解答

「scroll-snap-type 与 scroll-snap-align」课时是免费的吗？

是的 — 「scroll-snap-type 与 scroll-snap-align」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「scroll-snap-type 与 scroll-snap-align」这节课中我会学到什么？

使用 CSS 滚动捕捉属性创建轮播和分页式滚动体验。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「scroll-snap-type 与 scroll-snap-align」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. overflow：hidden、scroll、auto、clip
  2. scroll-behavior：smooth
  3. scroll-snap-type 与 scroll-snap-align
  4. 使用 ::-webkit-scrollbar 设置滚动条样式
← 返回 CSS Academy