Svelte-toc interferes with other anchor links in the document

[aegonwolf]

Svelte-toc interferes with other anchor links in the document

[janosh]

No need to remove smooth scrolling anymore. If you look at #37, I changed svelte-toc to wait for any page scrolling to finish before scrolling the active ToC item into view. To fix your problem, try just updating svelte-toc to latest.

[janosh]

Actually, this won't work. No need to try the passive modifier. I remember looking into this before. This appears to be a bug in Chromium that's been reported many times on SO and in the Chromium issue tracker as well:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1121151
• https://bugs.chromium.org/p/chromium/issues/detail?id=1043933
• https://bugs.chromium.org/p/chromium/issues/detail?id=833617

which might explain why it's working in FF. Sadly no response from the Chromium devs yet.

[janosh]

Thanks for the bug report. I think I remember seeing this as well at some point. Haven't had time to dig into it yet so can't offer a quick fix. A link to your site to see the problem in the wild would be great! 👍

[aegonwolf]

Thanks for the bug report. I think I remember seeing this as well at some point. Haven't had time to dig into it yet so can't offer a quick fix. A link to your site to see the problem in the wild would be great! 👍

I think it's browser specific, works almost fine with firefox (sometimes it goes to the wrong anchor, when I turn it off it works again in FF). In Chrome/Edge this always doesn't work for me.

Mondaystats.com/thesis
the references i.e. [18] are the anchor links that I have.

Cheers,

Oli

[janosh]

Yes, this is the behavior I remember seeing! I think making the scroll handler passive might solve this problem. Is the code public? If not, could you edit the Toc.svelte in your node_modules in-place as follows?

<svelte:window
  bind:innerWidth={window_width}
-  on:scroll={set_active_heading}
+  on:scroll|passive={set_active_heading}
  on:click={close}
/>

Be sure to restart the dev server. If you try that, let me know if it helps.

[janosh]

Also, great work on that thesis! Very impressive. 👍

[janosh]

2 workarounds:

1. remove

   html {
     scroll-behavior: smooth;
   }

2. Pass keepActiveTocItemInView={false} to <Toc />.

[aegonwolf]

@janosh thanks a lot for this (and the compliment :-)) I'll try with removing smooth scrolling, I have it through tailwind, and the second option too, I'll update if this works.

[aegonwolf]

No need to remove smooth scrolling anymore. If you look at #37, I changed svelte-toc to wait for any page scrolling to finish before scrolling the active ToC item into view. To fix your problem, try just updating svelte-toc to latest.

That's awesome, thank you so much!