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

::scroll-button

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

::scroll-button() は CSS の擬似要素で、スクロールコンテナーのスクロールをコントロールするためのボタンを表します。これらは、 content 値が none 以外の場合に、スクロールコンテナー上に生成されます。スクロールの方向は、引数の値によって決まります。

スクロール擬似要素

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:scroll-button
実験的
135
135
135
block-end
実験的
135
135
135
block-start
実験的
135
135
135
down
実験的
135
135
135
inline-end
実験的
135
135
135
inline-start
実験的
135
135
135
left
実験的
135
135
135
next
実験的
prev
実験的
right
実験的
135
135
135
star
実験的

*
135
135
135
up
実験的
135
135
135
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

horizontalkal-sel

CSS horizontalkal-sel demo.

プレビュー全画面表示

verticalscroll

CSS verticalscroll demo.

プレビュー全画面表示

Custom button

CSS custombutton demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク