demo · v140

TOC Active

A docs table of contents can use native anchor markers instead of an IntersectionObserver state machine. Scroll the article, compare the native group with the JS fallback, and toggle sticky positioning on both TOCs.

Background

Carousels and TOCs have historically needed a custom listener to keep a nav highlight aligned with the scroll position.

The older ::scroll-marker pattern helps, but generated pseudo-elements do not behave like author-supplied anchor elements.

The proposal

Set scroll-target-group: auto on the anchor list. The browser calculates which anchor's target is current in the scroll container.

The anchor remains real markup, so it can be focused, labelled, copied, and shared like any other link.

Spec

CSS Overflow Level 5 defines the property and the active scroll marker calculation used by :target-current.

The selector only becomes meaningful inside a scroll marker group. Outside the group, the same anchors remain ordinary links.

Compat

In browsers without support, this page keeps a side-by-side IntersectionObserver fallback so the behaviour can still be inspected.

The observer path needs explicit thresholds, class toggles, and desync handling that the native marker group avoids.

Future

The interesting integration point is sticky navigation. The TOC can stay pinned while the current marker is resolved from the article scroller.

Use the checkbox above to compare pinned and unpinned layouts while keeping the same marker state.

nav.native { scroll-target-group: auto; }
nav.native a:target-current { background: var(--accent-blue); color: var(--bg-ivory); }

see also