使用 CSS 创建轮播界面

Adam Argyle

发布时间：2025 年 3 月 20 日

从 Chrome 135 开始，您可以使用 CSS Overflow 5 规范中专为创建滚动和轮播界面而设计的功能。

本文概要介绍了使用这些新功能（无需 JavaScript）实现的许多不同的滚动和轮播界面体验。观看以下视频，了解您现在可以实现哪些功能。

视频中展示了滚动按钮、滚动标记、滚动驱动型动画、scroll-state() 查询、:has()、网格、锚点等元素的协同运作。

更令人印象深刻的是无障碍功能方面的故事。

由于工程团队和无障碍团队通力合作，浏览器可以处理轮播界面最佳实践。要想制作比这更易于访问的轮播界面，难度非常高。

轮播界面的元素显示为无障碍树状视图，其中明确指明了按钮和标签页元素，以便预览屏幕阅读器在轮播界面中看到的内容。
Chrome DevTools 轮播界面无障碍功能树的屏幕截图 - 演示

认识 ::scroll-button() 和 ::scroll-marker()

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

在 CSS 轮播界面功能的版本 1 中，按钮和标记是通过 CSS 创建的。浏览器会将这些元素作为同级兄弟元素放置在适当的标签页顺序中，并维护其状态。这样可以更轻松地开发无障碍轮播界面。

  • 滚动按钮
    浏览器提供的有状态、交互式滚动功能 <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 滚动标记可以提示轮播界面的大小，同时提供快速移动到末尾或开头的功能。CSS 滚动标记与滚动条不同，因为每个标记都是一个链接，可以表示滚动条中的任何项。

例如，电视连续剧的剧季就是一个很好的例子。不要为 10 个剧集分别创建标记，而是创建 2 个指向章节开头的标记。

系统会显示电视剧分集的水平列表，从第 2 季第 1 集开始。上方有两个列表标题：“第 1 季”和“第 2 季”，每个标题都有箭头指向它们，以提示它们是生成的滚动标记。

请注意，这些标记不是圆点，而是使用了其伪元素的 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: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
演示

标记的容器元素称为 ::scroll-marker-group，它会作为滚动条的兄弟元素创建，就像滚动按钮一样。您可以为此容器设置样式，并将其放置在所需的位置。

同时使用标记和按钮

将这两者结合起来，用户体验看起来就像轮播界面，但具有以下优势：

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

工作量更少，覆盖面更广，速度更快。

演示

资源

本文主要将这些功能称为“轮播界面”，但它们的功能和实用性远远超出了轮播界面的使用场景。如需全面了解这些新功能的潜力，请试用轮播式图库，并查看其他组件，例如滚动条、标签页和幻灯片。

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

它提供了一些开关，例如滚动按钮，启用后，所显示的轮播界面中会立即显示按钮以及所使用的关联 CSS。

配置器网站的屏幕截图，显示了简单列表的 HTML 代码段。HTML 下方有 4 个开关：滚动按钮、点状导航、自动分页和不活动。开关下方是一系列卡片，可供添加任何开关产品。
https://chrome.dev/carousel-configurator/

其中还包含与轮播界面相关的更高级概念的示例：

展示空间：对于好奇这些功能的使用范围的用户，可解答“它能否执行 X 操作？”等问题。每个演示均基于互联网上找到的用例。每个演示都展示了如何使用滚动驱动型动画、scroll-state() 查询等来协调这些按钮和标记。

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

轮播式图库着陆页的屏幕截图。包含欢迎标题、一些有关网站的信息，以及以链接形式显示的轮播界面示例列表。
https://chrome.dev/carousel/

这些示例从简单易用到功能丰富，应有尽有。浏览该库应该能给人启发、让人放心，当然还能检查代码以供使用。查找并检查 @layer utilities，了解有助于您制作轮播界面的实用程序。

进一步操作

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

自带元素

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

周期性滚动

许多轮播界面在到达末尾时会循环播放，就像嘉年华会中的旋转木马一样。我们已注意到这个问题，并打算为其提供平台解决方案。

希望您喜欢此功能。我们期待所有“JavaScript 已停用”的 Web 用户都能获得良好的滚动体验，并期待内置轮播界面通过更好的时间安排生命周期来减少 CLS。

减少工作量、提供出色的用户体验、提升广告效果。