React组件滚动位置恢复遇阻：如何正确存储并还原滚动位置？

你的核心问题在于实时监听滚动事件并保存位置，导致组件挂载时（返回页面初期）window.scrollY为0，触发scroll事件覆盖了之前存在localStorage的有效位置。下面给出两种可靠的实现方案：

方案一：组件卸载时才保存滚动位置（推荐） #

放弃实时监听，只在用户离开当前组件时保存当前滚动位置，避免挂载时误覆盖：

import { useState, useEffect } from 'react';

// 自定义localStorage状态钩子（确保初始值优先取localStorage）
function useLocalStorageState(defaultValue, key) {
  const [state, setState] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? parseInt(stored, 10) : defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, state.toString());
  }, [state, key]);

  return [state, setState];
}

export default function DataList() {
  const [scrollPos] = useLocalStorageState(0, 'listScrollPosition');
  const [dataLoaded, setDataLoaded] = useState(false);

  // 模拟API数据加载
  useEffect(() => {
    const fetchData = async () => {
      // 替换为真实API请求
      await new Promise(resolve => setTimeout(resolve, 1200));
      setDataLoaded(true);
    };
    fetchData();
  }, []);

  // 数据加载完成后恢复滚动位置
  useEffect(() => {
    if (dataLoaded) {
      window.scrollTo(0, scrollPos);
    }
  }, [dataLoaded, scrollPos]);

  // 组件卸载前保存当前滚动位置
  useEffect(() => {
    return () => {
      localStorage.setItem('listScrollPosition', window.scrollY.toString());
    };
  }, []);

  return (
    // 你的组件内容
    <div className="data-list">
      {/* 大量数据渲染 */}
    </div>
  );
}

为什么这个方案有效： #

• 只有用户离开组件时才会保存滚动位置，不会在返回页面初期（滚动位置还没恢复时）把0存进localStorage。
• 数据加载完成后再执行滚动恢复，避免因为DOM未渲染完成导致滚动无效。

方案二：优化实时监听逻辑，过滤初始0值 #

如果必须保留实时监听（比如需要实时同步滚动位置到其他地方），可以在保存时判断当前滚动值是否为初始加载的0，避免覆盖：

const [scrollPosition, setScrollPosition] = useLocalStorageState(0, 'scrollPosition');
const [isMounted, setIsMounted] = useState(false);
const [dataLoaded, setDataLoaded] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    const currentY = window.scrollY;
    // 组件挂载完成后再保存，跳过初始的0值
    if (isMounted) {
      setScrollPosition(currentY);
    }
  };

  window.addEventListener("scroll", handleScroll);
  // 标记组件已挂载完成
  setIsMounted(true);

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

// 数据加载完成后恢复位置
useEffect(() => {
  if (dataLoaded) {
    window.scrollTo(0, scrollPosition);
  }
}, [dataLoaded]);

额外优化：区分首次进入与返回场景 #

如果需要首次进入页面时滚动到顶部，仅返回时恢复位置，可以结合路由状态判断：

import { useLocation, useNavigate } from 'react-router-dom';

const location = useLocation();
const navigate = useNavigate();

useEffect(() => {
  if (dataLoaded) {
    // 只有从其他页面返回时恢复位置
    if (location.state?.fromList) {
      window.scrollTo(0, scrollPos);
    } else {
      // 首次进入，滚动到顶部
      window.scrollTo(0, 0);
    }
  }
}, [dataLoaded, scrollPos, location.state]);

// 跳转到其他页面时添加路由状态
const goToDetail = () => {
  navigate('/detail', { state: { fromList: true } });
};

内容的提问来源于stack exchange，提问作者Big boy