React组件切换后如何保持列表滚动位置？

问题场景：通过按钮切换显示卡片列表和地图组件，返回列表时页面会自动回到顶部，希望返回后能停留在之前浏览的滚动位置。

解决方案 #

核心逻辑是在切换到地图组件前保存当前滚动位置，切换回列表时恢复该位置，具体实现步骤如下：

1. 添加状态变量存储滚动位置
2. 切换组件时保存滚动值
3. 列表组件渲染完成后恢复滚动位置

修改后的完整代码：

import React, { useState, useEffect } from "react";
import "./App.css";

export default function App() {
  const [renderMap, setRenderMap] = useState(false);
  const [scrollPosition, setScrollPosition] = useState(0);

  // 切换组件时保存/恢复滚动位置
  const toggleComponent = () => {
    if (!renderMap) {
      // 切换到地图前，保存当前滚动位置
      setScrollPosition(window.scrollY);
    }
    setRenderMap(!renderMap);
  };

  // 当渲染列表时，恢复之前的滚动位置
  useEffect(() => {
    if (!renderMap) {
      window.scrollTo(0, scrollPosition);
    }
  }, [renderMap, scrollPosition]);

  return (
    <div className="main-world">
      {!renderMap ? (
        <div className="all-cards">
          {Array.from(Array(12), (_, index) => (
            <div key={`index_${index}`} className="all-cards-item">
              <div className="card-content">
                <div>
                  <img
                    src={`https://picsum.photos/500/300/?image=${index * 7}`}
                    alt=""
                  />
                </div>
                <h1>Card - {index + 1}</h1>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div>
          <h1>Map Area</h1>
        </div>
      )}
      <div className="content-button">
        <button onClick={toggleComponent}>
          {!renderMap ? "Show Map" : "Show List"}
        </button>
      </div>
    </div>
  );
}

关键代码说明 #

• scrollPosition状态：用于存储切换到地图前的页面滚动距离
• toggleComponent函数：点击按钮时，若要切换到地图，先通过window.scrollY获取当前滚动位置并保存，再切换组件状态
• useEffect钩子：监听renderMap和scrollPosition的变化，当渲染列表组件时（!renderMap为true），调用window.scrollTo恢复之前的滚动位置

这样修改后，从地图切回列表时，页面会自动滚动到之前浏览的位置，不会重置到顶部。

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