Scroll restoration issue with history.pushState

[gielcobben]

I'm working on a project with a masonry-style layout using Tanstack/Virtual, and I've run into a challenge I'd appreciate some help with.

Desired Functionality

• Open posts without navigating away from the main page
• Maintain scroll position when viewing a post
• Restore scroll position when returning to the grid view

Proposed Implementation

• Set position: fixed on the grid when a post is opened
• Toggle the position: fixed style between the grid and post element.
• Utilize window scroll for both grid and post views, avoiding nested scrolling

Key Difference from Modal Approach

Instead of opening posts in a modal with its own scrollbar, I want to leverage the window's scroll for both the grid and individual post views.

Current Issue

When loading the project for the first time:

1. Clicking an item to view a post works as expected
2. Going back to the grid view causes the scroll position to always reset to 0
3. After this initial cycle, subsequent post views and returns to the grid maintain the correct scroll position

Questions

1. Does anyone know why the scroll position resets to 0 only on the first return to the grid view?
2. How can I ensure the correct scroll position is maintained even on the first interaction?
3. Are there any initialization steps I might be missing that could cause this behavior?
4. Has anyone implemented a similar feature and encountered (and solved) this issue?

Any insights, suggestions, or troubleshooting steps would be greatly appreciated. Thank you in advance for your help!

Component

https://s8tlfh-5173.csb.app/
https://codesandbox.io/p/github/gielcobben/remix-shallow/main

import { json, LoaderFunctionArgs } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { useWindowVirtualizer } from "@tanstack/react-virtual";
import {
  CSSProperties,
  MouseEvent,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";
import { cn, getPage, getPosts, Post, useResponsiveLanes } from "~/utils";

export const LIMIT = 50;
export const OVERSCAN = 25;

export async function loader({ request }: LoaderFunctionArgs) {
  const { page } = getPage(new URL(request.url).searchParams);
  const { posts, total } = await getPosts({ page, limit: LIMIT });

  return json(
    {
      total,
      items: posts,
      url: request.url,
    },
    { headers: { "Cache-Control": "public, max-age=120" } }
  );
}

export default function Index() {
  const { items } = useLoaderData<typeof loader>();

  const lanes = useResponsiveLanes();
  const gridRef = useRef<HTMLDivElement>(null);
  const [post, setPost] = useState<Post | null>(null);

  const hiddenStyle: CSSProperties = {
    width: 640,
    left: "-9999px",
    position: "fixed",
    visibility: "hidden",
    pointerEvents: "none",
  };

  const rowVirtualizer = useWindowVirtualizer({
    lanes,
    overscan: 25,
    count: items.length,
    estimateSize: useCallback(() => 300, []),
  });
  const virtualItems = rowVirtualizer.getVirtualItems();

  const openPost = useCallback(
    (event: MouseEvent, item: Post) => {
      event.preventDefault();

      const measurementsCache = rowVirtualizer.measurementsCache;
      const offset = rowVirtualizer.scrollOffset;

      sessionStorage.setItem(
        "scroll-settings",
        JSON.stringify({ offset, measurementsCache })
      );

      history.pushState(null, "", `/posts/${item.id}`);

      setPost(item);

      window.scrollTo(0, 0);
    },
    [rowVirtualizer.measurementsCache, rowVirtualizer.scrollOffset, setPost]
  );

  const closePost = useCallback(() => {
    history.back();
  }, []);

  useEffect(() => {
    if (!post) {
      const scrollSettings = sessionStorage.getItem("scroll-settings");

      if (scrollSettings) {
        const { offset, measurementsCache } = JSON.parse(scrollSettings);

        rowVirtualizer.measurementsCache = measurementsCache;
        rowVirtualizer.scrollToOffset(offset);
      }
    }
  }, [post, rowVirtualizer]);

  useEffect(() => {
    function handlePopState() {
      setPost(null);
    }

    window.addEventListener("popstate", handlePopState);

    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);

  return (
    <div className="font-sans p-4">
      <div style={post ? hiddenStyle : undefined}>
        <div
          ref={gridRef}
          data-hydrating-signal
          className={cn("relative mx-auto w-full")}
        >
          <div
            style={{
              width: "100%",
              position: "relative",
              height: rowVirtualizer.getTotalSize(),
            }}
          >
            {virtualItems.map((virtualRow) => {
              const index = virtualRow.index;
              const item = items[index];

              return (
                <div
                  key={virtualRow.key}
                  className="p-4"
                  style={{
                    position: "absolute",
                    top: 0,
                    width: `${100 / lanes}%`,
                    left: `${(virtualRow.lane * 100) / lanes}%`,
                    transform: `translateY(${virtualRow.start}px)`,
                  }}
                  data-index={virtualRow.index}
                  ref={virtualRow.measureElement}
                >
                  {item ? <GridItem item={item} setPost={openPost} /> : null}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <article
        style={post ? undefined : hiddenStyle}
        className="flex items-center justify-center flex-col min-h-[calc(100dvh-200px)]"
      >
        <div
          className="size-52"
          style={{ backgroundColor: post?.backgroundColor }}
        />
        <button onClick={closePost} className="underline">
          Close {post?.title}
        </button>
      </article>
    </div>
  );
}

function GridItem({
  item,
  setPost,
}: {
  item: Post;
  setPost: (event: MouseEvent, item: Post) => void;
}) {
  return (
    <article
      style={{ height: item.height, backgroundColor: item.backgroundColor }}
    >
      <Link
        onClick={(event) => setPost(event, item)}
        to={`/posts/${item.id}`}
        className="rounded-xl size-full flex items-center justify-center"
      >
        {item.title}
      </Link>
    </article>
  );
}