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

Scroll markers

スクロールマーカーは、::scroll-marker擬似要素と::scroll-marker-group擬似要素を使って、スクロールコンテナのナビゲーションUIをCSS単体で構築する機能です。目次、タブパネル、カルーセルのドットインジケーターなどをJavaScriptなしで実装できます。マーカーはクリック時に対応する要素にスクロールし、キーボードナビゲーションにも対応しています。

スクロールマーカーナビゲーション

概要

スクロールマーカーは、::scroll-marker擬似要素と::scroll-marker-group擬似要素を使って、スクロールコンテナのナビゲーションUIをCSS単体で構築する機能です。目次、タブパネル、カルーセルのドットインジケーターなどをJavaScriptなしで実装できます。マーカーはクリック時に対応する要素にスクロールし、キーボードナビゲーションにも対応しています。

対応ブラウザ

デスクトップ

Chrome 135+
Edge 135+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 135+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
.carousel {
  overflow-x: auto;
}
.carousel::scroll-marker-group {
  display: flex;
  gap: 8px;
}
.slide::scroll-marker {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

実務での使いどころ

  • CSSカルーセルのドットナビゲーション

    スクロールスナップと組み合わせて、JavaScriptなしでドットインジケーター付きのカルーセルを実装します。

注意点

  • Chrome 135以降でのみサポートされており、プロダクション環境ではJavaScriptによるフォールバック実装が推奨されます。

アクセシビリティ

  • スクロールマーカーはフォーカス可能な要素として生成されるため、キーボードユーザーによるナビゲーションが可能です。

参考リンク