{ "id": "motion:motion-scrollspy", "slug": "motion-scrollspy", "kind": "motion", "title": { "ja": "スクロールスパイ", "en": "Scrollspy" }, "aiName": "Scrollspy", "summary": { "ja": "目次が現在地をハイライト", "en": "The table of contents highlights the current section" }, "number": 24, "group": "pin-nav", "techniques": [ "intersection-observer" ], "rules": [ { "ja": "目次の項目は必ずページ内リンク（#sec-n）にし、現在地には aria-current=\"true\" を付ける", "en": "Each table of contents item is an in-page link (#sec-n), and the current item carries aria-current=\"true\"" }, { "ja": "現在地は画面中央の帯で決める。区画の上端では切り替えない", "en": "Decide the current section by a band at the centre of the viewport, not by section top edges" }, { "ja": "375px 幅では目次を上端に横一列で固定し、画面幅を超えない", "en": "At 375px the table of contents is a fixed horizontal row at the top and never exceeds the width" } ], "reproduction": { "prompt": { "ja": "スクロールスパイ — Scrollspy\n\n2 列のレイアウトで、左に目次（sticky で画面上端から 40px 下に固定）、右に高さ 70vh 以上の区画を 5 つ並べる。\n区画の id は sec-1 から sec-5、目次の各項目は href=\"#sec-n\" のページ内リンクにする。\nIntersectionObserver で、画面の中央 10% の帯に入った区画を求め、対応する目次項目にだけ aria-current=\"true\" を付ける。\n現在地の項目は文字色と左の 2px 線を --accent にする。375px 幅では目次を画面上端に横一列で固定し、区画はその下に続ける。\nCSS と IntersectionObserver だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 目次の項目は必ずページ内リンク（#sec-n）にし、現在地には aria-current=\"true\" を付ける\n- 現在地は画面中央の帯で決める。区画の上端では切り替えない\n- 375px 幅では目次を上端に横一列で固定し、画面幅を超えない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-scrollspy/demo.html", "en": "Scrollspy — Scrollspy\n\nUse a two-column layout: a table of contents on the left, sticky 40px below the top edge, and five sections of at least 70vh on the right.\nGive the sections the ids sec-1 through sec-5, and make each table of contents item an in-page link (href=\"#sec-n\").\nUse IntersectionObserver to find the section inside the central 10% band of the viewport, and set aria-current=\"true\" only on its matching item.\nThe current item takes the accent colour for its text and its 2px left rule. At 375px width, fix the table of contents as one horizontal row at the top edge and let the sections continue below it.\nImplement with CSS and IntersectionObserver only; no library.\n\nDo not drop:\n- Each table of contents item is an in-page link (#sec-n), and the current item carries aria-current=\"true\"\n- Decide the current section by a band at the centre of the viewport, not by section top edges\n- At 375px the table of contents is a fixed horizontal row at the top and never exceeds the width\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-scrollspy/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-scrollspy/demo.html", "html": "\n\n\n\n\n24 スクロールスパイ — Scrollspy\n\n\n\n

スクロールスパイ

Scrollspy

目次が現在地をハイライト

SCROLL ↓

\n\n

\n \n

Section 01