React左侧侧边栏点击跳转后滚动位置回到顶部如何解决

点击侧边栏菜单项触发路由跳转/组件重渲染时，类名为scroll-sidebar的滚动容器要么被整体重新挂载，要么在侧边栏展开/收起类名切换时触发DOM重排，最终导致滚动位置被重置到顶部。

按优先级从高到低尝试，前两种方案基本可以覆盖所有场景：

• 方案1：CSS配置修复（优先试，80%同类问题由样式错误导致）
  先调整滚动容器的基础样式，避免类名切换时触发滚动状态重置：

  .scroll-sidebar {
    /* 固定滚动容器高度，按你项目实际顶部导航高度调整数值 */
    height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
  }
  

  同时排查外层<aside>标签、父级布局容器的样式，不要给这些非滚动容器加overflow: hidden属性，这类属性会在类名切换触发重排时清空内部滚动容器的位置记录。另外检查你给nav.sidebar-nav加的fixed类，如果设置了position: fixed会让元素脱离文档流，导致滚动父级指向body，路由切换时body滚动位置重置也会带动侧边栏回到顶部，移除这个不必要的固定定位即可。
• 方案2：手动持久化滚动位置（100%兼容所有场景）
  如果样式调整后仍有问题，直接通过原生事件记录+恢复滚动位置，修改LayoutWithSidebar组件代码如下：

  const LayoutWithSidebar = ({ toggleSideBar, setToggleSidebar, btn }) => {
    const { t } = useTranslation();
    const scrollContainerRef = React.useRef(null);
  
    // 组件挂载时恢复已存储的滚动位置
    React.useEffect(() => {
      const savedPosition = sessionStorage.getItem('sidebar_scroll_top');
      if (scrollContainerRef.current && savedPosition) {
        scrollContainerRef.current.scrollTop = Number(savedPosition);
      }
    }, []);
  
    const handleEnterMouse = () => {
      setToggleSidebar(true);
    };
  
    // 滚动时实时记录位置
    const handleScroll = (e) => {
      sessionStorage.setItem('sidebar_scroll_top', e.target.scrollTop);
    };
  
    return (
      <aside
        className={`left-sidebar-style ${
          toggleSideBar ? 'open-left-sidebar' : 'left-sidebar'
        }`}
        onMouseEnter={handleEnterMouse}
        data-sidebarbg="skin5">
        <div 
          className="scroll-sidebar"
          ref={scrollContainerRef}
          onScroll={handleScroll}
        >
          <UserProfile btn={btn} toggleSideBar={toggleSideBar} translation={t} />
          <SidebarLinks btn={btn} toggleSideBar={toggleSideBar} translation={t} />
        </div>
        {(toggleSideBar || btn) && <SidebarFooter />}
        <style jsx toggleSideBar={toggleSideBar}>
          {Styles}
        </style>
      </aside>
    );
  };
  
  export default LayoutWithSidebar;
  

  用sessionStorage存储位置可以同时兼容页面刷新的场景，如果不需要刷新保留位置，把存储逻辑换成普通useRef存值即可。
• 方案3：调整路由结构避免侧边栏重挂载
  检查路由配置，如果LayoutWithSidebar被放在了路由渲染出口内部，每次切换路由都会重新挂载整个侧边栏组件，自然会丢失滚动位置。正确的布局结构应该把侧边栏放在路由出口外层，仅右侧内容区随路由切换更新：

  // 正确结构参考
  <div className="app-container">
    <LayoutWithSidebar /> {/* 侧边栏为公共布局，不随路由切换重挂载 */}
    <div className="main-content">
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        {/* 其他业务路由 */}
      </Routes>
    </div>
  </div>
  

如果你给侧边栏加了展开/收起的宽度过渡动画，要确保动画执行期间.scroll-sidebar的overflow-y: auto属性没有被临时移除，否则滚动条在动画中临时消失也会导致滚动位置被重置。

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