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

[jovanblazek]

In my case, the solution was to scroll the element, similar to what docs describe. https://tanstack.com/router/v1/docs/framework/react/guide/scroll-restoration#manual-scroll-restoration

  const scrollEntry = useElementScrollRestoration({
    id: TAB_BAR_SCROLL_RESTORATION_ID,
  })

  useLayoutEffect(() => {
    if (scrollEntry && tabBarRef.current) {
      tabBarRef.current.scrollTo({
        left: scrollEntry.scrollX,
        behavior: "instant",
      })
    }
  }, [scrollEntry])
  
  // ...
  return ( 
    <div
      ref={tabBarRef}
      data-scroll-restoration-id={TAB_BAR_SCROLL_RESTORATION_ID}

[n-mcnally]

It's unfortunate there's no way to opt-out (for example, using a data attribute) but this seems like the best solution to the problem otherwise.

Thank you!

[canac]

I'm building a horizontally scrolling carousel where scrolling to a new item updates the route. When the route changes, scroll restoration kicks in and it scrolls the carousel back to the old item. I want to keep scroll restoration on in the app but disable it just for the carousel.

[Lexachoc]

I have a similar use case. I'm using TanStack Router with TanStack Table and TanStack Virtual to render a large virtualized table.

Users can select a row (single selection), and when they navigate away and come back, I'd like the table to automatically scroll to the previously selected row using scrollToIndex().

However, with scrollRestoration enabled, TanStack Router restores the table's previous scroll position, overriding the position set by scrollToIndex().

It would be nice to have a way to opt out of scroll restoration for a specific scrollable element (in my case, the table's scroll container), while keeping it enabled for the rest of the pages. Perhaps something like data-scroll-restoration="false"?