Function useScrollRestoration

packages/shared/src/hooks/useScrollRestoration.ts:16–58

()

};

export const useScrollRestoration = (): void => {
  const { asPath } = useRouter();

  useEffect(() => {
    const handleScroll = () => {
      scrollPositions[getScrollKey(asPath)] = window.scrollY;
    };

    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [asPath]);

  useEffect(() => {
    const target = scrollPositions[getScrollKey(asPath)] ?? 0;
    if (target === 0) {
      return undefined;
    }

    // Wait until the page is tall enough before scrolling, so we don't clamp
    // to the bottom while feed content is still hydrating.
    const deadline = performance.now() + RESTORE_TIMEOUT_MS;
    let frame = 0;

    const tick = () => {
      const maxScroll =
        document.documentElement.scrollHeight - window.innerHeight;

      if (maxScroll >= target || performance.now() >= deadline) {
        window.scrollTo(0, Math.min(target, Math.max(0, maxScroll)));
        return;
      }

      frame = requestAnimationFrame(tick);
    };

    frame = requestAnimationFrame(tick);

    return () => cancelAnimationFrame(frame);
  }, [asPath]);
};

export const useManualScrollRestoration = (): void => {
  useEffect(() => {