React中返回首页时滚动位置异常问题求助

问题分析 #

你遇到的核心矛盾是：未滚动文章页直接返回首页时滚动位置正常，但在文章页滚动后返回，首页滚动位置就会错乱。结合代码来看，主要可能是路由默认滚动行为与自定义恢复逻辑冲突、首页滚动恢复时机不对这两个原因导致的。

解决方案 #

1. 禁用React Router默认滚动行为

React Router默认会在导航时自动滚动到顶部，返回时尝试恢复滚动位置，这会和我们自定义的sessionStorage存储逻辑冲突。可以通过ScrollRestoration组件精准控制：

// 在你的路由根组件（比如App.jsx）中添加
import { ScrollRestoration } from 'react-router-dom';

function App() {
  return (
    <>
      {/* 仅对首页保留滚动位置，其他页面不处理 */}
      <ScrollRestoration
        getKey={(location) => location.pathname === '/' ? 'home-scroll' : undefined}
      />
      {/* 你的路由配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:postID" element={<Post />} />
      </Routes>
    </>
  );
}

2. 优化首页滚动恢复逻辑

当前的轮询逻辑时机不够精准，改成监听页面加载和 resize 事件，确保内容完全渲染后再恢复滚动：

// Home.jsx 中替换原有的滚动恢复useEffect
useEffect(() => {
  const restoreScroll = () => {
    const savedPosition = parseInt(sessionStorage.getItem('HomeScroll') || '0');
    // 确保页面高度足够容纳要恢复的位置
    if (document.documentElement.scrollHeight >= savedPosition) {
      window.scrollTo({ top: savedPosition, behavior: 'auto' });
      // 完成后移除监听
      window.removeEventListener('load', restoreScroll);
      window.removeEventListener('resize', restoreScroll);
    } else {
      requestAnimationFrame(restoreScroll);
    }
  };

  if (!loading) {
    window.addEventListener('load', restoreScroll);
    window.addEventListener('resize', restoreScroll);
    restoreScroll();
  }

  return () => {
    window.removeEventListener('load', restoreScroll);
    window.removeEventListener('resize', restoreScroll);
  };
}, [loading]);

3. 移除文章页的强制滚动代码

Post.jsx中原本的window.scrollTo(0,0)会干扰返回时的滚动恢复，直接删除这段代码：

// 删掉Post.jsx中的这个useEffect
// useEffect(() => {
//     window.scrollTo(0, 0);
// }, []);

4. 优化首页滚动位置存储的性能

实时监听scroll事件写入sessionStorage会有性能损耗，添加节流函数减少写入频率：

// Home.jsx中替换原有的scroll监听useEffect
useEffect(() => {
  // 简单实现节流函数
  const throttle = (func, delay) => {
    let lastTrigger = 0;
    return (...args) => {
      const now = Date.now();
      if (now - lastTrigger >= delay) {
        lastTrigger = now;
        func(...args);
      }
    };
  };

  const handleScroll = throttle(() => {
    sessionStorage.setItem('HomeScroll', window.scrollY.toString());
  }, 100); // 每100ms存储一次

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

5. 验证滚动位置的存储与恢复

可以添加日志确认sessionStorage的值是否正常：

• 在Home的handleScroll中添加：console.log('保存滚动位置：', window.scrollY)
• 在Home的restoreScroll中添加：console.log('恢复滚动位置：', savedPosition)
• 在Post组件的卸载函数中添加：console.log('离开文章页时的首页滚动位置：', sessionStorage.getItem('HomeScroll'))

通过日志可以快速定位是否是sessionStorage的值被意外修改。

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