::scroll-button()

语法

::scroll-button(<scroll-button-direction>) {
  /* ... */
}

参数

<scroll-button-direction>

一个表示你想要选择的滚动按钮方向的值。可用值如下：

*

选中所有原始元素的滚动按钮，允许在一条规则中为每个按钮应用样式。

down

选中将内容向下滚动的按钮。

left

选中将内容向左滚动的按钮。

right

选中将内容向右滚动的按钮。

up

选中将内容向上滚动的按钮。

block-end

选中将内容向块末尾方向滚动的按钮。

block-start

选中将内容向块起始方向滚动的按钮。

inline-end

选中将内容向行内末尾方向滚动的按钮。

inline-start

选中将内容向行内起始方向滚动的按钮。

规范还定义了另外两个值——next 和 prev——但目前没有任何浏览器支持它们。

描述

仅当 content 属性被设置为 none 以外的值时，::scroll-button() 伪元素才会在滚动容器内生成。它们作为滚动容器子 DOM 元素的同级元素生成，紧邻这些子元素以及容器上生成的任何 ::scroll-marker-group 之前。

每个滚动容器最多可以生成四个滚动按钮，它们将内容向块轴和行内轴的起点和终点滚动。选择器的参数指定了所选的滚动方向。你也可以指定一个 * 值来定位所有的 ::scroll-button() 伪元素，从而在一条规则中为所有按钮提供样式。

生成的按钮的行为就像常规的 <button> 元素一样，包括共享它们的默认浏览器样式。它们是可聚焦的、可访问的，并且可以像常规按钮一样被激活。当按下滚动按钮时，滚动容器的内容会向指定方向滚动一个“页面”，或者大约是滚动容器的尺寸，类似于按下 PgUp 和 PgDn 键。

建议在滚动容器上设置 CSS 滚动捕捉，并将你想要滚动的每个独立内容项设置为一个捕捉目标。在这种情况下，激活一个滚动按钮会将内容滚动到距离一个“页面”远的捕捉目标。虽然滚动按钮在没有滚动捕捉的情况下也能工作，但你可能得不到想要的效果。

当无法再向某个滚动按钮的滚动方向进一步滚动时，该按钮会自动被禁用，否则它是启用的。你可以使用 :enabled 和 :disabled 伪类来为滚动按钮的启用和禁用状态设置样式。

示例

更多轮播图示例，请参阅创建 CSS 轮播图。

创建滚动按钮

在这个例子中，我们演示了如何在一个 CSS 轮播图上创建滚动按钮。

HTML

我们有一个基本的 HTML <ul> 列表，包含几个 <li> 列表项。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

CSS

为轮播图设置样式

我们通过将 display 设置为 flex，将我们的 <ul> 转换成一个轮播图，从而创建了一行不换行的 <li> 元素。将 overflow-x 属性设置为 auto，意味着如果项目在 x 轴上溢出其容器，内容将会水平滚动。然后，我们将 <ul> 转换为一个滚动捕捉容器，通过将 scroll-snap-type 的值设置为 mandatory 来确保在容器滚动时项目总是能捕捉到相应位置。

ul {
  display: flex;
  gap: 4vw;
  padding-left: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

接下来，我们为 <li> 元素设置样式，使用 flex 属性使它们的宽度为容器的 100%。将 scroll-snap-align 的值设置为 start 会使得在内容滚动时，最左侧可见项目的左侧边缘捕捉到容器的左边缘。

li {
  list-style-type: none;
  background-color: #eeeeee;
  flex: 0 0 100%;
  height: 100px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

创建滚动按钮

首先，所有滚动按钮都被赋予了一些基本的样式，以及基于不同状态的样式。为键盘用户设置 :focus 样式是很重要的。此外，由于当无法再向某个方向滚动时，滚动按钮会自动被设置为 disabled，我们使用 :disabled 伪类来针对这种状态。

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

接下来，通过 content 属性为左、右滚动按钮设置一个合适的图标，这个属性也是导致滚动按钮生成的原因。

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

我们不需要为 content 上的图标设置替代文本，因为浏览器会自动提供合适的无障碍名称。

结果

注意滚动按钮是如何在轮播图的左下角创建的。试着按下它们，看看它们如何使内容滚动。

定位滚动按钮

前面的例子可以工作，但按钮的位置并不理想。在这一节中，我们将添加一些 CSS 来使用锚点定位来定位它们。

CSS

首先，在 <ul> 上设置了一个引用的 anchor-name，将其定义为一个命名锚点。接下来，每个滚动按钮的 position 都被设置为 absolute，并且其 position-anchor 属性被设置为列表的 anchor-name，以将两者关联起来。

ul {
  anchor-name: --my-carousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}

为了实际定位每个滚动按钮，我们首先在它们两个上都设置了 align-self 值为 anchor-center，以使它们在轮播图上垂直居中。

ul::scroll-button(*) {
  align-self: anchor-center;
}

然后我们为它们的内边距属性设置值来处理水平定位。我们使用 anchor() 函数来将按钮的指定边相对于轮播图的边进行定位。在每种情况下，都使用 calc() 函数在按钮边缘和轮播图边缘之间添加一些空间。例如，左侧滚动按钮的右边缘被定位在轮播图左边缘右侧 45 像素处。

ul::scroll-button(left) {
  right: calc(anchor(left) - 45px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 45px);
}

结果

规范

浏览器兼容性

另见

• scroll-marker-group
• ::scroll-marker-group
• ::scroll-marker
• ::column
• :target-current
• 创建 CSS 轮播
• CSS overflow 模块
• CSS anchor positioning 模块
• CSS 轮播库 via chrome.dev (2025)