このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
scroll-marker-group
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
scroll-marker-group はCSS のプロパティで、スクロールコンテナー要素に::scroll-marker-group 擬似要素を生成するかどうかを制御します。このプロパティが存在する場合、スクロールマーカーグループをデフォルトの視覚的順序およびタブ順序において、スクロールグループコンテナーの内容の前 (before) と後 (after) のどちらに配置するかも同時に指定します。
メモ:複数の<a> 要素を含む既存の要素からスクロールマーカーグループを作成するには、scroll-target-group プロパティを使用してください。2 つの動作の違いについて読んでください。
構文
/* 単一値 */scroll-marker-group: before;scroll-marker-group: after;scroll-marker-group: none;/* グローバル値 */scroll-marker-group: inherit;scroll-marker-group: initial;scroll-marker-group: revert;scroll-marker-group: revert-layer;scroll-marker-group: unset;値
after::scroll-marker-group擬似要素は、スクロールコンテナーの子 DOM 要素の兄弟として、それらと、生成された::scroll-button()擬似要素の直前に生成されます。コンテナーのタブ順およびレイアウトボックス順（DOM 構造順ではない）の最後に表示されます。before::scroll-marker-group擬似要素は、スクロールコンテナーの子 DOM 要素の兄弟として、それらと、生成された::scroll-button()擬似要素の直前に生成されます。コンテナーのタブ順およびレイアウトボックス順（DOM 構造順ではない）の最後に表示されます。none要素には
::scroll-marker-group擬似要素は生成されません。これが既定値です。
メモ:スクロールマーカーグループのコンテナーの視覚的な表示位置をタブ順と一致させるのが最善の手法です。::scroll-marker-group にスタイルが適用されているマーカーグループをコンテンツの先頭に位置指定する場合は、before を使用してタブ順の先頭に配置してください。グループをコンテンツの最後に位置指定する場合は、after を使用してタブ順の最後に配置してください。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
scroll-marker-group =
none|
before|
after
例
scroll-marker-group プロパティを使用する完全な例については、CSS カルーセルの作成参照してください。
スクロールマーカーの配置
この例では、scroll-marker-group プロパティの 3 つの値を示しています。
HTML
基本的な HTML の<ul> リストに、複数の<li> リストアイテムがあります。
<fieldset> <legend><code>scroll-marker-group</code> の値を選択:</legend> <label><input type="radio" name="p" value="before" />before</label> <label><input type="radio" name="p" value="after" checked />after</label> <label><input type="radio" name="p" value="none" />none</label></fieldset><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 の場合に、アイテムが常に所定の場所にスナップするようにします。
scroll-marker-group プロパティを使用してスクロールマーカーグループを作成し、そのグループをすべてのコンテンツの後に配置します。
ul { display: flex; gap: 4vw; padding-left: 0; margin: 32px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-marker-group: after;}次に、<li> 要素にスタイルを設定し、flex プロパティを使用して、コンテナーの幅の33% にします。scroll-snap-align の値をstart に設定すると、コンテンツがスクロールされると、一番左に見えるアイテムの左端がコンテナーの左端にスナップします。
li { list-style-type: none; background-color: #eeeeee; flex: 0 0 33%; scroll-snap-align: start; text-align: center; line-height: 5;}次に、::scroll-marker 擬似要素を使用して、赤い境界線のある正方形のマーカーを各リストアイテムに作成し、::scroll-marker-group 擬似要素にスタイルを適用して、各マーカーの間に0.2em の間隔を空けて、スクロールマーカーを 1 行にレイアウトします。
li::scroll-marker { content: " "; border: 1px solid red; height: 1em; width: 1em;}::scroll-marker-group { display: flex; gap: 0.2em;}最後に、良い使い勝手を得るためには、現在スクロールされている要素のマーカーを他の要素とは異なるスタイルに設定し、:target-current 擬似クラスでマーカーを対象とします。
::scroll-marker:target-current { background: red;}fieldset { width: 20em;}label { font-family: monospace; display: block;}:has([value="before"]:checked) ul { scroll-marker-group: before;}:has([value="after"]:checked) ul { scroll-marker-group: after;}:has([value="none"]:checked) ul { scroll-marker-group: none;}結果
スクロールマーカーグループのコンテナーの配置に注意してください。before とafter でキーボードのタブ順がどのように異なるかを確認し、値をnone に設定するとグループが消えることに注意してください。
仕様書
| Specification |
|---|
| CSS Overflow Module Level 5 # scroll-marker-group-property |