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

scroll-target-group

scroll-target-groupは、通常のアンカーリンクをスクロールマーカーとして機能させるためのCSSプロパティです。::scroll-marker-group擬似要素の代替として、既存のHTMLアンカーリンクにスクロールマーカーの振る舞いを付与できます。:target-currentなどの擬似クラスと組み合わせて、スクロール位置に基づく動的なスタイリングが可能になります。

スクロールマーカーアンカーリンク

概要

scroll-target-groupは、通常のアンカーリンクをスクロールマーカーとして機能させるためのCSSプロパティです。::scroll-marker-group擬似要素の代替として、既存のHTMLアンカーリンクにスクロールマーカーの振る舞いを付与できます。:target-currentなどの擬似クラスと組み合わせて、スクロール位置に基づく動的なスタイリングが可能になります。

対応ブラウザ

デスクトップ

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

モバイル

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

基本構文

CSS 
.toc {
  scroll-target-group: self;
}
.toc a:target-current {
  font-weight: bold;
  color: #3498db;
}

実務での使いどころ

  • 目次のアクティブ状態表示

    ページ内リンクの目次で、現在スクロール位置に対応する項目を自動的にハイライト表示します。

注意点

  • Chrome 140以降のみのサポートであり、他のブラウザではIntersection Observer APIによるフォールバックが一般的です。

アクセシビリティ

  • アンカーリンクベースのナビゲーションはキーボードアクセシブルであり、支援技術との相性も良好です。

参考リンク