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

scroll-target-group

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

scroll-target-group は CSS のプロパティで、要素がスクロールマーカーグループコンテナーであるかどうかを指定します。

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-target-group
実験的
140
140
140
auto
実験的
140
140
140
none
実験的
140
140
140
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

tochilight

CSS tochilight demo.

プレビュー全画面表示

tab style nav

CSS tab style nav demo.

プレビュー全画面表示

Sidebar

CSS sidebar demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク