Table of contents
An on-page navigation index with scroll-spy. Given a flat, reading-order list of headings ({ id, label, level }), it renders a nested <ol> of anchor links inside a <nav> landmark. An IntersectionObserver tracks which section is in view and marks its link with aria-current="location". Clicking a link smooth-scrolls to the heading (instant under prefers-reduced-motion) and moves focus there. Nesting is derived from each item’s level. Forwards a ref to the nav.
Scroll-spy — live (scroll the right pane)
Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
OCSS Rules
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Rule taxonomy
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Signal semantics
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Trust Framework
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Signed envelope
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Trust List
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Conformance
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. OCSS carries typed rule payloads inside a two-layer signed envelope so signals move with provenance intact.
The TOC spies the #toc-scroll-root container; the active link tracks the section nearest the top.
Controlled active section
activeId = "x-a"
Flat (single level — no nesting)