CSSの:target-currentのPolifillを作っていると、::scroll-markerが必ず出てきます。
実はこのscroll-markerという命令を全く知らなかったので、今回はその仕様について調べてブログに残しておきます。
[擬似要素] ::scroll-marker-group
MDN :
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/::scroll-marker
合わせて覚えておくべき、CSS機能に「scroll-marker-group」というのがあります。
これは、カルーセルの下によくある、ポッチのことをscroll-marker（スクロールマーカー）と言うんですが、アレです。
※デモではないです、サンプル画像です。
これまでJavascriptで作り出していたこのマーカーも、DOM構築しなくても簡単に作り出すことができるようになっています。
ブラウザ対応(2026年3月時点)
Operaも対応しているようですが、日本とiPhone使用率の高いSafariとFirefoxが、まるで対応されていません。（現時点では）
::scroll-markerの使い方
MDNに書かれているサンプルコードは次の通りです。
li {
counter-increment: markers;
}
li::scroll-marker {
content: counter(markers);
font-family: sans-serif;
width: fit-content;
height: 1em;
padding: 5px;
color: black;
text-decoration: none;
border: 2px solid rgb(0 0 0 / 0.15);
border-radius: 0.5em;
background-color: #eeeeee;
}
li:first-child::scroll-marker {
content: "最初";
}
li:last-child::scroll-marker {
content: "最後";
}
::scroll-marker:hover {
background-color: #ddcccc;
}
::scroll-marker:target-current {
background-color: purple;
color: white;
}
::scroll-markerという「擬似要素」で、::beforeとか、::afterと同じ感じで、
カルーセルなどの内部スクロールのスクロールするアイテムが今どの位置にいるのかというマーキングしてくれる表示を
擬似要素として表示してくれる便利機能です。
この機能実装してみると分かったんですが、スクロールする時って、通常、"overflow:hidden;" として、スクロール内のはみ出した箇所は非表示にするんですが、
scroll-markerは、スクロールエリアの外に表示するため、このルールを逸脱して、表示してくれます。
なので、DOM構造で同じことをやろうとすると、スクロールエレメントの横または下などに、別要素を作らないといけないので、欄外（階層外）になり、CSSで連結して書くのが難しくなってしまうんです。
ということで、便利な機能だということが改めて理解できました。
あとがき
GoogleChromeが、CSSの新機能を前進的に取り入れてくれるのはありがたいのですが、他のブラウザで使えないという状態では、本番のWebサイトで採用するわけにはいかんのですよ。
ということで、この機能も、先日作った、Polyfillに機能追加して入れ込むようにしました。
このブログが公開される時には、Githubに反映されていると思いますので、便利に使えるようになっていることでしょう。
Github :
css_scroll_target_polyfill
0 件のコメント:
コメントを投稿