Highlighted active heading erratic when near document end

[janosh]

Find out why IntersectionObserver appears to have trouble identifying the active heading when scrolling to near the page bottom. Highlighted heading seems to jump erratically between last two items in ToC.

[thedivtagguy]

Trying to figure out why this is happening too. The demo site does not have this issue though, any ideas why?

[janosh]

The problem is svelte-toc currently only looks at the first intersection entry returned by the IntersectionObserver and always makes that the active heading:

svelte-toc/src/lib/Toc.svelte

Lines 48 to 50 in 3b995cd

	([entry]) => {
	activeHeading = entry.target as HTMLHeadingElement // assign intersecting node to activeHeading
	},

When two headings change visibility simultaneously (or at least close in time to be within one update cycle of the observer), both are passed into the callback function. Maybe the order of entries depends on scroll direction or something like that. In any case which of the two becomes the active heading appears to be up to chance at that point. I think that's why the active heading jumps around erratically. So a solution might be to compare the intersectionRatio of all returned entries and pick the one with the highest value as active. Or pick the one closest to the center of the screen.

[janosh]

This should be fixed now in v0.2.0 which is a rather big rewrite. It also adds the feature to auto-scroll within the ToC to always keep the currently active heading in view.

@thedivtagguy Would be great if you could give it a try and report back issues if any. There might be some due to the amount of changes.