Next.js Discord

Discord Forum

Scroll Management (scrollRestoration & scrollBehavior) Not able to disable

Unanswered
Saarloos Wolfdog posted this in #help-forum
Open in Discord
Saarloos WolfdogOP
We know scrollRestoration and scrollBehavior are for different purposes but would like to propose that they both fall under scrollManagement with relation to routing.

We are wanting to completely disable native scroll managment so that we have complete control over "when" scrollRestoring happens in time. This is because we are implementing complex Page Transition animations that:
- Animates OUT the current page
- Transitions between pages
- Animates IN the target page

Since these animations are timed, we need to control when the restore, or any scrollTo 's happen. These means two things for us:
1) we need to completely disable the native scrollRestore
2) we need to prevent any native scrollTo's that happen

ISSUE #1:
we've tried:
- setting config experimental.scrollRestoration = false https://github.com/vercel/next.js/blob/5888bb902badfaf5baa659b8b399d55be78b4621/test/integration/scroll-back-restoration/next.config.js#L3
- setting __NEXT_SCROLL_RESTORATION = false
https://github.com/vercel/next.js/blob/5888bb902badfaf5baa659b8b399d55be78b4621/packages/next/src/shared/lib/router/router.ts#L856
- setting NEXT_PUBLIC_SCROLL_RESTORATION = false

Nothing seems to work, even though we can see many places in the core code that reference this env var

ISSUE #2:
there is native code that uses scrollTo regardless of the scrollRestoration setting, and appears to compete with it even if its on.
https://github.com/vercel/next.js/blob/ba99599328b06831b93e11ac0e14f1fe360b730e/packages/next/src/client/index.tsx#L766

We have things working by disabling all <Link> with scroll=fallse (not ideal)
And we also need to force window.history.scrollRestoration = 'manual' on each route change.
Lastly we will need to patch core NextJS in order to prevent the ISSUE #2 code above from running.

Would LOVE some incite here or guidance if anyone has any.

0 Replies