Highlighted active heading erratic when near document end
janosh opened this issue · comments
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.
Trying to figure out why this is happening too. The demo site does not have this issue though, any ideas why?
The problem is svelte-toc
currently only looks at the first intersection entry returned by the IntersectionObserver
and always makes that the active heading:
Lines 48 to 50 in 3b995cd
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.
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.