You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've run into an issue in my Next.js project (latest version: 13.4.19) using <ScrollControls> and <Scroll html> from the react-three-drei library (latest version: 9.80.5). When I am within a page and scroll, the vertical scrollbar correctly moves with the scrollable content inside <Scroll html>, as expected. However, if I navigate to a new page using <Link> from next/link and then navigate back to the previous page using my browser's back button, the vertical scrollbar does not restore its previous position. Instead, it resets to the top of the page (i.e., position: [0, 0]). As a result, when I try to scroll down, the page first scrolls to the top before allowing me to continue scrolling down.
Please note that I've tried to disable resetting the scroll position to the top of the page using the following snippet router.push(getRoute, { scroll: false }); based on the documentation from Next.
I believe that the transform property among others in the highlighted div are what <ScrollControls> or <Scroll html> automatically generates since the coordinates in transform update with the scroll position of my page:
If I remove this line in my inspector, the vertical scrollbar disappears, which I'm not sure if modifying will help to somehow restore the previous scroll position. I believe the line was automatically generated by <ScrollControls> since the window height of 500% corresponds to the number of pages (n=5) I had set in my pages prop in <ScrollControls>:
The text was updated successfully, but these errors were encountered:
Hi there.
I've run into an issue in my Next.js project (latest version: 13.4.19) using
<ScrollControls>
and<Scroll html>
from the react-three-drei library (latest version: 9.80.5). When I am within a page and scroll, the vertical scrollbar correctly moves with the scrollable content inside<Scroll html>
, as expected. However, if I navigate to a new page using<Link>
from next/link and then navigate back to the previous page using my browser's back button, the vertical scrollbar does not restore its previous position. Instead, it resets to the top of the page (i.e., position: [0, 0]). As a result, when I try to scroll down, the page first scrolls to the top before allowing me to continue scrolling down.Please note that I've tried to disable resetting the scroll position to the top of the page using the following snippet
router.push(getRoute, { scroll: false });
based on the documentation from Next.I've included the related snippets of code:
I believe that the
transform
property among others in the highlighted div are what<ScrollControls>
or<Scroll html>
automatically generates since the coordinates intransform
update with the scroll position of my page:If I remove this line in my inspector, the vertical scrollbar disappears, which I'm not sure if modifying will help to somehow restore the previous scroll position. I believe the line was automatically generated by
<ScrollControls>
since the window height of 500% corresponds to the number of pages (n=5) I had set in mypages
prop in<ScrollControls>
:The text was updated successfully, but these errors were encountered: