React JS中点击返回按钮无法保留滚动位置的问题求助

问题根源分析 #

你的代码逻辑方向正确，但可能存在以下几个问题导致滚动位置无法保留：

1. handleScrollPosition 的 this 指向错误，导致无法正确获取容器的 scrollTop 值，存入 sessionStorage 的可能是无效值。
2. componentDidMount 中执行 scrollTo 的时机过早，此时列表数据可能还未加载完成，后续DOM重绘会将滚动位置重置为(0,0)。
3. 未排查是否有其他代码（比如数据更新、组件卸载逻辑）意外清空 sessionStorage 或重置滚动位置。

具体修复方案 #

1. 修正事件绑定，确保正确获取滚动位置 #

将 handleScrollPosition 改为箭头函数（或在构造函数中绑定 this），避免 this 指向错误：

// 改为箭头函数，自动绑定组件实例的this
handleScrollPosition = (e) => {
  if (this.myRef.current) {
    sessionStorage.setItem("scrollPosition", this.myRef.current.scrollTop.toString());
  }
};

2. 延迟恢复滚动位置，确保DOM渲染完成 #

在数据加载完成后再执行滚动恢复，并且通过 setTimeout 确保DOM已更新：

async componentDidMount() {
  console.log("inside CDM");
  // 先加载列表数据（如果有异步加载逻辑）
  await this.fetchListData();
  this.restoreScroll();
}

// 单独提取恢复滚动的方法，方便复用
restoreScroll = () => {
  const scrollPos = sessionStorage.getItem("scrollPosition");
  if (scrollPos && this.myRef.current) {
    // 延迟执行，确保DOM渲染完毕
    setTimeout(() => {
      this.myRef.current.scrollTo(0, Number(scrollPos));
    }, 0);
  }
};

// 如果数据是通过props传入，在componentDidUpdate中检查数据更新后恢复滚动
componentDidUpdate(prevProps) {
  if (prevProps.listData !== this.props.listData && this.props.listData) {
    this.restoreScroll();
  }
}

3. 排查潜在的滚动重置逻辑 #

• 检查组件的 componentWillUnmount 钩子，确认没有清空 sessionStorage 的代码。
• 检查列表渲染逻辑，避免数据更新时自动将滚动位置设为(0,0)。
• 确认 SearchListWrapper 确实是滚动容器（检查其CSS是否设置了 overflow: auto 或 scroll），避免滚动事件绑定到了错误的元素上。

额外优化：路由切换时的滚动保留（如果使用React Router） #

如果是通过React Router跳转页面，返回时可能触发组件重新挂载，可在路由离开时保存滚动位置：

componentWillUnmount() {
  // 组件卸载前保存滚动位置
  if (this.myRef.current) {
    sessionStorage.setItem("scrollPosition", this.myRef.current.scrollTop.toString());
  }
}

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