Window.scrollY does not sync with transform coordinates of <ScrollControls> and <Scroll html>

[EbodShojaei]

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:

const InnerContent = React.memo(() => {
    const ViewComponent = useViewStore((state) => state.view);

    return (
        <Scroll html>
            <div style={{
                pointerEvents: 'auto',
                zIndex: 1,
            }}>
                {ViewComponent && <ViewComponent />}
            </div>
        </Scroll>
    );
});

export const Views = ({ children }: { children: React.ReactNode }) => {
    const pages = useViewStore((state) => state.page);

    ViewController();

    return (
        <ScrollControls pages={pages}>
            {children}
            <InnerContent />
        </ScrollControls>
    );
};

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>: