使用 CSS 创建轮播界面

Adam Argyle

发布时间：2025 年 3 月 20 日

从 Chrome 135 开始，您可以使用 CSS Overflow 5 规范中的功能，这些功能旨在创建滚动和轮播界面。

这篇博文概述了使用这些新功能（无需 JavaScript）打造的多种不同的滚动和轮播界面。观看以下视频，了解现在可以实现哪些功能。

视频中展示了滚动按钮、滚动标记、滚动驱动的动画、scroll-state() 查询、:has()、网格、锚点等多种功能。

更令人印象深刻的是无障碍功能。

在工程团队和无障碍功能团队的共同努力下，浏览器可以处理轮播界面的最佳实践。很难制作出比这更易于访问的轮播界面。

Meet ::scroll-button() 和 ::scroll-marker()

轮播界面是一个滚动区域，最多可添加两个界面功能（按钮和标记）。

在 CSS 轮播功能的第一版中，按钮和标记是通过 CSS 创建的。浏览器会将这些元素作为同级元素放置，并为其分配适当的角色，使其处于正确的 Tab 键顺序中，同时保持其状态。这样可以更轻松地开发无障碍轮播界面。

• 滚动按钮
  浏览器提供的有状态的互动式滚动可供性<button>元素，有助于访问内容，并在按下时滚动滚动区域的 85%。

• 滚动标记
  浏览器提供的有状态导航 <a> 元素，可帮助用户访问滚动区域中任何请求的内容。

本文的其余部分将演示如何使用这些新功能构建轮播界面。

从滚动条开始

您可以向网站上的任何滚动区域添加按钮和标记。

以下 CSS 会创建一个基本滚动区域，供后续步骤使用，以便向其中添加按钮和标记。轮播界面不需要滚动吸附，但在此示例中使用了滚动吸附。轮播界面也适用于垂直滚动器和双向滚动器。

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

添加带有 ::scroll-button() 的滚动按钮

根据您的操作系统，滚动条周围可能已经有滚动按钮。内置的滚动条按钮往往会小幅移动滚动区域，而 CSS 滚动按钮则会移动滚动区域的 85%。

对于一次只显示一个全宽项且具有滚动贴靠点的轮播界面，这会感觉像是按项计算的金额。对于一次显示多个项的长列表，它会滚动几乎整个页面。

如需使用 CSS 添加滚动按钮，请执行以下操作：

1. 像其他伪元素一样添加它们，并使用选择器：.carousel::scroll-button(right) 表示向右滚动的按钮。
2. 指定 content，并提供可选的无障碍后备替代文本。

浏览器将创建实际按钮，其中包含您的内容，作为滚动条的同级元素。现在，您可以根据需要随意布局、设置样式或anchor()这些按钮。以下 CSS 会创建两个按钮，一个用于向左滚动，另一个用于向右滚动。

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

使用 ::scroll-marker() 添加滚动标记

与滚动条滑块元素类似，CSS 滚动标记可以提示轮播界面的大小，同时还提供快速移动到开头或结尾的 affordance。CSS 滚动标记与滚动条不同，因为每个标记都是一个链接，可以表示滚动器中的任何项。

举例来说，电视连续剧的剧季就属于这种区别。您可以创建 2 个指向章节开头的标记，而不是为 10 集中的每一集都创建一个标记。

请注意，这些标记不是点，而是使用其伪元素的 content: "Season 1" 属性。标记也可以是缩略图，通常用于电子商务网站或以照片为主的网站中的图库轮播界面。

标记类似于网页内 <a> 链接，但具有一些特殊功能：

1. 它们包含一个 :target-current 状态，用于表示标记处于视图中或已贴靠。
2. 包含键盘导航，行为类似于 focusgroup。
3. 包括屏幕阅读器体验，并像标签页列表一样报告。

按照以下步骤，在滚动条中添加有意义的兴趣点标记：

1. 将 scroll-marker-group 的放置位置定义为 before 或 after。
2. 使用选择器 .carousel .point-of-interest::scroll-marker 选择地图注点。
3. 指定 content，并提供可选的无障碍后备替代文本；可以是数字、文本、空值或图片。

浏览器会创建所有标记，并将它们放入标记组容器中。此示例为每个 <li> 创建一个空标记，以便为每个项创建一个标记点。

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

标记的容器元素称为 ::scroll-marker-group，它与滚动条按钮一样，是滚动条的同级元素。您可以设置此容器的样式，并将其放置在所需的任何位置。

同时显示标记和按钮

将两者结合起来，效果看起来像轮播界面，但具有以下优势：

• 在 JavaScript 停用的情况下也能正常运行。
• 无水合或延迟调整大小（减少 CLS）。
• 可用于各种滚动动画和触发器。
• 包含无障碍功能。
• 支持触控、鼠标和键盘。

事半功倍，更快地扩大覆盖面。

资源

此博文大多将这些功能称为“轮播界面”，但它们的功能和实用性远不止轮播界面使用场景。如需全面了解这些新功能的潜力，请试用轮播式图库并查看其他组件，例如：scrollspy、标签页和幻灯片。

• Web 标准
  • CSS 溢出 5
  • 轮播界面说明
  • WAI Aria 轮播界面
• Chrome
  • Intent to Ship
  • 轮播式图库
  • 轮播界面配置器

轮播界面配置器

对于视觉型和互动型学习者，请尝试使用轮播界面配置器。

它提供开关（例如滚动按钮），启用后，显示的轮播界面会立即显示按钮以及所用的相关 CSS。

它还包含一些与轮播广告相邻的更高级概念的示例：

• 互动性
• scroll-state
• 滚动驱动的动画
• 和滚动贴靠列

轮播式图库

展示空间，让好奇的用户了解这些功能可以实现哪些操作，并解答“它可以实现 X 吗？”之类的问题。每个演示都基于互联网上找到的用例。每个演示都展示了如何使用滚动驱动的动画、scroll-state() 查询等来编排这些按钮和标记。

有趣的是，整个网站都没有使用 JavaScript。

这些示例从简单易用到功能丰富，应有尽有。浏览图库应该能激发灵感、令人安心，当然，还应该可以检查代码以供采用。查找并检查 @layer utilities，了解可帮助您制作轮播界面的实用程序。

进一步操作

我们很自豪这些功能与所有 HTML 和 CSS 的集成效果都非常出色。CSS 轮播界面的无障碍功能非常出色。CSS 轮播界面的性能优于任何 JavaScript 解决方案。CSS 轮播界面的用户体验自然、流畅且丰富。不过，您可以通过多种方式来提高排名。

自带元素

我们正在努力让您能够为滚动按钮和标记添加自己的组件。这意味着您可以提供自己的 <a> 标记，其中包含图标等丰富内容。您还可以使用 Tailwind 构建自己的多层按钮。

循环滚动

许多轮播界面在到达末尾时会自行环绕，就像游乐园里的旋转木马一样。我们已注意到此问题，并打算为此提供平台解决方案。

希望您喜欢此功能。我们期待所有“已停用 JavaScript”的网络用户都能获得出色的滚动体验，并期待通过内置轮播界面的更合理生命周期来减少 CLS。

您需要做的事情更少，用户体验更出色，效果更理想。