tocSpy
Follows the reader through a page for an "On this page" list.
import { tocSpy } from "@sdxc/ui/docs";Usage
Watches the headings that the host's a[href^="#"] links point at. On every settled
scroll and resize it sets data-active on each link whose section is on screen
("lead" on the first), moves the [data-toc-marker] element over them through
--toc-marker-start / --toc-marker-size, and on the closest [data-toc] writes the lead's
text into [data-toc-reading] and sets --toc-progress (0–1) for a progress ring. The top edge a section must pass is
the first heading's scroll-margin-top, so it matches where a jump to that heading lands.
A link followed inside a <details> closes it, so the section is not hidden under the list.
Signature
tocSpy(): MixinDescriptor<HTMLElement>Examples
<nav><ul mix={[tocSpy()]}><li><a href="#install">Install</a></li></ul></nav>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/docs too.
sectionsInView
The indexes of the sections on screen. A reader scrolled to the bottom of the page is credited with the last section even when its heading never reached the top edge.
sectionsInView(starts: number[], viewport: { top: number; bottom: number }, atBottom: boolean): number[]| Parameter | Type | Required | Description |
|---|---|---|---|
starts | number[] | Yes | |
viewport | { top: number; bottom: number } | Yes | |
atBottom | boolean | Yes |