Issues with highlighting the correct content

[janosh]

Issues with highlighting the correct content

[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!