Scroll markers
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
scroll-marker-group は CSS のプロパティで、 スクロールコンテナー要素に ::scroll-marker-group 擬似要素を生成するかどうかを制御します。このプロパティが存在する場合、スクロールマーカーグループをデフォルトの視覚的順序およびタブ順序において、スクロールグループコンテナーの内容の前 (before) と後 (after) のどちらに配置するかも同時に指定します。
メモ: 複数の <a> 要素を含む既存の要素からスクロールマーカーグループを作成するには、scroll-target-group プロパティを使用してください。2 つの動作の違いについて読んでください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 135 | 135 | | | 135 | | |
after 実験的 | 135 | 135 | | | 135 | |
before 実験的 | 135 | 135 | | | 135 | |
none 実験的 | 135 | 135 | | | 135 | |
| その他 | ||||||
| `::スクロールマーカー` | 135 | 135 | | | 135 | |
| `::スクロールマーカーグループ` | 135 | 135 | | | 135 | |
基本構文
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によるフォールバック実装が推奨されます。
アクセシビリティ
- スクロールマーカーはフォーカス可能な要素として生成されるため、キーボードユーザーによるナビゲーションが可能です。