Opt-out of scroll restoration for a specific element on a page?

[maevia]

I have a sidebar navigation with collapsible items that often overflows (SPA).

Is there any way currently to prevent/opt-out of the scroll restoration just for a single element on a page? The main content area is restored as expected but I'd prefer to keep the navigation scroll position consistent between navigations.

[guilhermerodz]

import { useLocation } from "@tanstack/react-router";
import React from "react";

export function usePreventScrollRestoration() {
  const location = useLocation();

  const reactId = React.useId();

  const c = React.useRef({
    counter: 0,
  });

  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
  React.useLayoutEffect(() => {
    c.current.counter++;
  }, [location.pathname]);

  const dataScrollRestorationId = `${reactId}-${c.current.counter}`;

  return { "data-scroll-restoration-id": dataScrollRestorationId };
}

i spent 6 hours trying to achieve this hack.

hope it helps