::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)