Scroll Management (scrollRestoration & scrollBehavior) Not able to disable
Unanswered
Saarloos Wolfdog posted this in #help-forum
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
And we also need to force
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.
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.