Scroll-Synced Margin Annotations — IntersectionObserver Footnote Highlighting

Academic papers and annotated articles have long used side-margin notes to add commentary without interrupting the main text's flow. This snippet recreates that print convention on the web, but adds something print can't: the margin note for whichever paragraph is currently in view lights up automatically as the reader scrolls, so the connection between text and annotation stays visually obvious without the reader having to hunt for it.

Why IntersectionObserver instead of scroll position math

An older approach would listen to the article panel's scroll event and manually compare each paragraph's getBoundingClientRect() against the viewport on every scroll tick — expensive to run at 60fps and easy to get subtly wrong. This snippet instead creates a single IntersectionObserver scoped to the scrollable article panel via root: article, and lets the browser itself efficiently report exactly when each <p data-note> crosses a 60%-visible threshold, firing a callback only when that actually changes rather than on every scroll frame.

A Map, not a loop, connects paragraphs to their notes

Each paragraph carries a data-note="n1" attribute, and each margin note carries a matching data-target="n1". Rather than searching the DOM for a match every time the observer fires, a Map (noteByTarget) is built once up front, so each intersection callback does an O(1) lookup — noteByTarget.get(entry.target.dataset.note) — instead of re-querying the DOM on every scroll-triggered change.

Not every paragraph needs an annotation

Only some <p> elements in the article carry a data-note attribute — plain paragraphs without one are simply never observed and never get an "active" highlight, which mirrors how real annotated texts work: a note calls out a *specific* claim or definition, not every sentence, and the highlighting logic in this snippet naturally reflects that same selectivity.

The threshold controls how "in view" has to be before it counts

threshold: 0.6 means a paragraph must be at least 60% visible within the scrollable article panel before its callback fires as intersecting — tuning this number changes how eagerly the highlight anticipates a paragraph coming into view versus waiting until it's substantially read. A lower threshold highlights earlier (as soon as a small sliver appears); a higher one waits until the paragraph dominates the visible area.