Unable to scroll for several seconds when smooth scrolling is disabled

[Hayao0819]

Overview

I am building my blog using Next.js App Routing. I discovered this great project and would love to incorporate it into my site.

At first, I wrote the following code according to the sample in the README, but smooth scrolling did not work correctly, and after about 4 seconds it froze and scrolled to the appropriate location.

I thought this was a strange problem with Next.js or React, so I disabled smooth scrolling. Now when I click on a link it goes to the right place immediately, but now it freezes after the move.

How can I completely disable this scrolling for a few seconds?

Below is the code and deployment for my site.

Smooth scrolling enable

https://homepage-5u4yet43o-hayao0819s-projects.vercel.app/blog/posts/20240620/why-shell/

https://github.com/Hayao0819/hayao0819.com/blob/7466101b019bc843f32a004254ff71d8e5b7700f/src/components/elements/Toc.tsx#L16-L20

Smooth scrolling disabled

https://homepage-hy9yq23le-hayao0819s-projects.vercel.app/blog/posts/20240620/why-shell/

https://github.com/Hayao0819/hayao0819.com/blob/44fa39676eaa58b5ad59c9829d347b5b59d1ac7e/src/components/elements/Toc.tsx#L16-L23

[Hayao0819]

I am very sorry. I found that the problem is not with tocbot but with next-view-transiton.

[tscanlin]

No worries, glad you figured it out!

[Hayao0819]

I hope this issue that I have mistakenly put up will be useful to someone else.

You can use this patch to fix it. https://github.com/shuding/next-view-transitions/pull/19