harsh-harlequin

I can't get the scroll restoration to work on my app. Someone can help me please?

Hello, I am building an App with Tauri, in the frontend I have React with Vite. I added the TanStack router and for now it works pretty good. But I can't make the scroll restoration works and I don't know what else to do. I was looking the SessionStore and I have something like this:

{"cached":{"/today___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":56},"/___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":560},"/feeds/7___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":1904},"/articles/282___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":4400}},"next":{"html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":null,"scrollY":null}}}

{"cached":{"/today___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":56},"/___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":560},"/feeds/7___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":1904},"/articles/282___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":4400}},"next":{"html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":null,"scrollY":null}}}

So I suppose the ScrollRestoration component detect the position and save it but fails when have to scroll? I added it in my __root.tsx file:

import { createRootRoute, Outlet, ScrollRestoration } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import ApplicationLayout from "../components/layout/ApplicationLayout";
import { NextUIProvider } from "@nextui-org/react";

export const Route = createRootRoute({
  component: () => (
    <>
      <ScrollRestoration getKey={(location) => location.pathname} />
      <NextUIProvider>
        <ApplicationLayout>
          <Outlet />
        </ApplicationLayout>
      </NextUIProvider>
      <TanStackRouterDevtools />
    </>
  ),
});

import { createRootRoute, Outlet, ScrollRestoration } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import ApplicationLayout from "../components/layout/ApplicationLayout";
import { NextUIProvider } from "@nextui-org/react";

export const Route = createRootRoute({
  component: () => (
    <>
      <ScrollRestoration getKey={(location) => location.pathname} />
      <NextUIProvider>
        <ApplicationLayout>
          <Outlet />
        </ApplicationLayout>
      </NextUIProvider>
      <TanStackRouterDevtools />
    </>
  ),
});

Also, I dont know if this is a problem but I am using react-infinite-scroll-component. Evert

10 Replies

flat-fuchsia•11mo ago

what makes you think it failed? can you please create a minimal example, ideally outside tauri using one of the existing stackblitz router examples?

harsh-harlequinOP•11mo ago

If I knew, I would be looking for the solution and not identifying the problem 🙂 I think the problem is not with the ScrollRestoration itself, it should be something about the tauri environment maybe? Ok I will try that router examples

flat-fuchsia•11mo ago

which history are you using? i am just guessing now but if you are using hash history, scroll restoration might not be triggered correctly

harsh-harlequinOP•11mo ago

I think the default which is the BrowserHistory. Here is my main.tsx:

import ReactDOM from "react-dom/client";
import "./main.css";
import { RouterProvider, createRouter } from "@tanstack/react-router";

import { routeTree } from "./routeTree.gen";

const router = createRouter({ routeTree });

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  // <React.StrictMode>
  < RouterProvider router={router} />,
  // </React.StrictMode>,
);

import ReactDOM from "react-dom/client";
import "./main.css";
import { RouterProvider, createRouter } from "@tanstack/react-router";

import { routeTree } from "./routeTree.gen";

const router = createRouter({ routeTree });

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  // <React.StrictMode>
  < RouterProvider router={router} />,
  // </React.StrictMode>,
);

I am sorry, I am stuck on this. I am not a frontend expert. Do you know if I can debug the ScrollRestoration process? I mean, can I see some logs? Also, I don't fully understand React. I was thinking the scroll could be happening when the data is not loaded yet and the component is still not fully loaded (I am just trying to think)? I follow the structure of the data stored in the SessionStore and this match with the structure of my front.

fascinating-indigo•10mo ago

The scroll restoration isnt stable From the issues I can see on github

flat-fuchsia•10mo ago

as I wrote above, please create a minimal complete example based on e.g. https://tanstack.com/router/v1/docs/framework/react/examples/basic-file-based

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

harsh-harlequinOP•10mo ago

ok, Thanks. I will try to see it on weekend

flat-fuchsia•10mo ago

any luck with that reproducer?

harsh-harlequinOP•10mo ago

Hey, the problem was my app hehe The scrollRestoration works fine. Every time the user go back I was reseting the list of elements so there was no space to scroll. I put the status of the list into a Context so when the user go back the list is already loaded and the scroll just works. Thanks!

flat-fuchsia•10mo ago

glad you figured it out

Gaming

Programming

I can't get the scroll restoration to work on my app. Someone can help me please?

Did you find this page helpful?