Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
スクロール Limited support

::scroll-button

::scroll-button()は、スクロールコンテナに対してブラウザネイティブのスクロールボタンを生成するCSS擬似要素です。上下左右の方向を指定でき、クリックやキーボード操作でコンテンツをスクロールさせることができます。JavaScriptなしでカルーセルやスライダーのナビゲーションボタンを実装でき、アクセシビリティにも配慮された設計です。

スクロール擬似要素

概要

::scroll-button()は、スクロールコンテナに対してブラウザネイティブのスクロールボタンを生成するCSS擬似要素です。上下左右の方向を指定でき、クリックやキーボード操作でコンテンツをスクロールさせることができます。JavaScriptなしでカルーセルやスライダーのナビゲーションボタンを実装でき、アクセシビリティにも配慮された設計です。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

HTML 
.carousel::scroll-button(left) {
  content: '<';
}
.carousel::scroll-button(right) {
  content: '>';
}

実務での使いどころ

  • CSS単体でのカルーセルナビゲーション

    JavaScriptなしでスクロールコンテナに前後のナビゲーションボタンを追加し、カルーセルUIを実装します。

注意点

  • 現時点ではどの主要ブラウザでも正式サポートされていないため、プロダクション環境での使用は避けてください。

アクセシビリティ

  • ::scroll-button()はフォーカス可能な要素として生成されるため、キーボードユーザーもスクロール操作が可能です。

参考リンク