スクロールスパイ
Scrollspy
別名: スクロールスパイ、Scrollspy
生態(さわってみる)
一言定義
スクロール位置に応じて、現在表示中のセクションに対応するナビゲーション項目を自動的にハイライトするUI。
分類
使う場面
- 長い1ページ構成のドキュメントで、今どのセクションを読んでいるかをナビ側にも反映したいとき
- サイドナビのクリックでスムーズスクロールし、以後は現在地を自動追従させたいとき
避ける場面
- セクション自体が少なく、現在地の自動ハイライトの恩恵が小さいとき
- 各セクションが独立したページで、そもそも1ページ内スクロールという前提が成り立たないとき(→タブやパンくずリスト)
近縁種との比較
スクロールスパイは追従セクションと同じ「長い記事のスクロールに連動する」挙動だが、追従セクションが要素そのものの画面上の位置を固定するのに対し、スクロールスパイは要素の位置は動かさず、ナビゲーション側のハイライト状態だけをスクロールに合わせて切り替える。両者は組み合わせて使われることも多く、追従する目次自体がスクロールスパイでハイライトも変わる構成が典型例である。タブとは、並列コンテンツの現在位置を示す点で似ているが、タブはクリックによる能動的な切り替えで1パネルしか表示しない離散的なナビゲーションであるのに対し、スクロールスパイは1ページ内に並んだ全セクションを連続的にスクロールし、ハイライトだけがスクロール位置に応じて自動的に追従する点で対照的である。
実例リンク
アクセシビリティ
- role
- ナビゲーションはnav要素+リンク一覧。現在のセクションに対応するリンクにaria-current="true"を付ける
- キーボード操作
- 各リンクはTabで移動、Enterでスムーズスクロール。prefers-reduced-motionが有効な環境では瞬時にジャンプする
- 補足
- IntersectionObserverでセクションの可視判定を行うのが定番実装。複数セクションが同時に閾値を満たす場合は、画面上端に最も近いセクションを優先するなどタイブレークのルールを決めておく