::scroll-button()

<scroll-button-direction>

選択するスクロールボタンの方向を表す値です。次の値を利用できます。

*

元の要素のスクロールボタンをすべて選択し、単一のルールで各ボタンにスタイルを適用できるようにします。

down

コンテンツを下方向にスクロールするボタンを選択します。

left

コンテンツを左にスクロールするボタンを選択します。

right

コンテンツを右にスクロールするボタンを選択します。

up

コンテンツを上方向にスクロールするボタンを選択します。

block-end

ブロック末尾方向にコンテンツをスクロールするボタンを選択します。

block-start

ブロック先頭方向にコンテンツをスクロールするボタンを選択します。

inline-end

インライン末尾方向にコンテンツをスクロールするボタンを選択します。

inline-start

インライン先頭方向にコンテンツをスクロールするボタンを選択します。

仕様では、next と prev という 2 つの値も定義されていますが、これらは現在どのブラウザーでも対応していません。

::scroll-button() 擬似要素は、スクロールコンテナーの content プロパティが none 以外の値に設定されている場合にのみ、その中に生成されます。これらは、スクロールコンテナーの子 DOM 要素の兄弟要素として、それらおよびコンテナー上に生成された ::scroll-marker-group の直前に生成されます。

スクロールコンテナーごとに最大 4 つのスクロールボタンを生成することができ、ブロック軸とインライン軸の先頭と末尾に向かってコンテンツをスクロールします。このセレクターの引数は、選択するスクロール方向を指定します。また、* の値を指定して、すべての ::scroll-button() 擬似要素をターゲットにし、1 つのルールですべてのボタンにスタイルを指定することもできます。

生成されるボタンは、既定のブラウザースタイルを共有するなど、通常の <button> 要素とまったく同じように動作します。フォーカス可能、アクセシビリティ対応であり、通常のボタンと同じようにアクティブ化することができます。スクロールボタンが押されると、スクロールコンテナーのコンテンツは、 PgUp キーおよび PgDn キーを押した場合と同様に、指定した方向に 1 ページ分、つまりスクロールコンテナーの寸法とほぼ同じ分だけスクロールされます。

スクロールコンテナーに CSS スクロールスナップを設定し、スクロールしたいコンテンツの別個のアイテムをそれぞれスナップターゲットとして設定することをお勧めします。こうすると、スクロールボタンを有効にしたとき、コンテンツは 1 ページ分の距離にあるスナップターゲットまでスクロールされます。スクロールスナップを設定しなくてもスクロールボタンは動作しますが、期待した効果が得られない場合があります。

特定のスクロールボタンのスクロール方向にさらにスクロールできない場合、そのボタンは自動的に無効になり、それ以外の場合は有効になります。 :enabled および :disabled 擬似クラスを使用して、スクロールボタンの有効および無効の状態のスタイルを設定することができます。

カルーセルの例については、「CSS カルーセルの作成」をご覧ください。

この例では、CSS カルーセルにスクロールボタンを作成する方法を示します。

HTML

基本的な HTML の <ul> リストに、いくつかの <li> リストアイテムがあります。

<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
  <li>アイテム 4</li>
  <li>アイテム 5</li>
  <li>アイテム 6</li>
  <li>アイテム 7</li>
  <li>アイテム 8</li>
</ul>

CSS

カルーセルのスタイル設定

<ul> をカルーセルに変換するには、 display を flex に設定し、単一の、折り返しのない <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: #eee;
  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: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

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

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
  cursor: unset;
}

次に、content プロパティを使用して、左右のスクロールボタンに適切なアイコンを設定します。このプロパティは、スクロールボタンを生成させる役割も果たします。

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

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

ブラウザーが自動的に適切なアクセシブル名を指定するため、コンテンツ上のアイコンに代替テキストを設定する必要はありません。

結果

カルーセルの左下にスクロールボタンが作成されていることに注目してください。ボタンを押して、コンテンツがスクロールされる様子を確認してください。

前回の例は動作しますが、ボタンの位置は理想的ではありません。この章では、アンカー位置指定を使用してボタンを配置するための CSS を追加します。

CSS

まず、参照 anchor-name を <ul> に設定して、名前付きアンカーとして定義します。次に、各スクロールボタンの position を absolute に設定し、 position-anchor プロパティをリストの anchor-name に設定して、 2 つを関連付けます。

ul {
  anchor-name: --myCarousel;
}

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

各スクロールボタンを実際に配置するには、まず、両方の 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 オーバーフローモジュール
• CSS アンカー位置指定モジュール
• CSS Carousel Gallery (chrome.dev, 2025)