Issues with highlighting the correct content

[vamshinenu]

when I was in your web page I was trying to move around, and found out that.
when I click on Usage and back on Examples the highlight is still on Usage tables of content. and for another example

when you are on top, try clicking on the bottom line Test Page Navigation it was highlighting on Styling instead.

[janosh]

Unfortunately, that's a known shortcoming of the set_active_heading implementation using activeHeadingScrollOffset to determine which heading is active.

svelte-toc/src/lib/Toc.svelte

Lines 80 to 107 in 532acf0

	function set_active_heading() {
	let idx = headings.length
	while (idx--) {
	const { top } = headings[idx].getBoundingClientRect()
	// loop through headings from last to first until we find one that the viewport already
	// scrolled past. if none is found, set make first heading active
	if (top < activeHeadingScrollOffset || idx === 0) {
	activeHeading = headings[idx]
	activeTocLi = tocItems[idx]
	// this annoying hackery to wait for scroll end is necessary because scrollend event only has 2%
	// browser support https://stackoverflow.com/a/57867348 and Chrome doesn't support multiple
	// simultaneous scrolls, smooth or otherwise (https://stackoverflow.com/a/63563437)
	clearTimeout(scroll_id)
	scroll_id = window.setTimeout(() => {
	if (keepActiveTocItemInView && activeTocLi) {
	// get the currently active ToC list item
	// scroll the active ToC item into the middle of the ToC container
	nav.scrollTo?.({
	top: activeTocLi?.offsetTop - nav.offsetHeight / 2,
	behavior: `smooth`,
	})
	}
	}, 50)
	return // exit while loop if updated active heading
	}
	}
	}

While I think there's no perfect solution here (e.g. "clicking on the bottom line Test Page Navigation it was highlighting on Styling instead" seems unavoidable if headings are nearby) I readily admit this could likely be improved. PRs welcome!