React问题：缩小Div时文本滚动位置未重置的解决方法

问题描述 #

以下React代码实现了盒子状态切换：点击按钮可将盒子从不可滚动的短高度切换为可滚动的长高度。但操作后发现：当滚动文本后关闭盒子，文本会停留在滚动位置，不会自动回到顶部。

原代码：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setOpen((open) => !open)}>
        {open ? "Close" : "Open"}
      </button>

      <div
        style={{
          width: "200px",
          border: "1px solid blue",
          ...(!open
            ? {
                height: "54px",
                overflow: "hidden",
              }
            : {
                height: "120px",
                overflowX: "hidden",
                overflowY: "auto",
              }),
        }}
      >
        very long text very long text very long text very long text very long
        text very long text very long text text very long text very long text
        text very long text very long text text very long text very long text
      </div>
    </div>
  );
}

操作步骤：

• 打开盒子：盒子展开为可滚动的长高度状态
• 向下滚动文本：将文本滚动到下方位置
• 关闭盒子：盒子收缩为不可滚动的短高度，但文本仍停留在滚动后的位置

简便解决方案 #

方法1：使用useRef手动重置滚动位置

通过useRef获取容器DOM元素，在关闭盒子时（状态变为false），调用scrollTop = 0将文本滚回顶部。

修改后的代码：

import { useState, useRef } from "react";
import "./styles.css";

export default function App() {
  const [open, setOpen] = useState(false);
  const contentRef = useRef(null);

  const toggleOpen = () => {
    setOpen(prev => {
      // 关闭盒子时重置滚动位置
      if (prev) {
        contentRef.current.scrollTop = 0;
      }
      return !prev;
    });
  };

  return (
    <div className="App">
      <button onClick={toggleOpen}>
        {open ? "Close" : "Open"}
      </button>

      <div
        ref={contentRef}
        style={{
          width: "200px",
          border: "1px solid blue",
          ...(!open
            ? {
                height: "54px",
                overflow: "hidden",
              }
            : {
                height: "120px",
                overflowX: "hidden",
                overflowY: "auto",
              }),
        }}
      >
        very long text very long text very long text very long text very long
        text very long text very long text text very long text very long text
        text very long text very long text text very long text very long text
      </div>
    </div>
  );
}

方法2：利用key属性强制重置组件

给容器div添加key={open}，当open状态变化时，React会销毁旧容器并创建新实例，滚动位置自然重置为顶部。这种方法代码改动最小，但会触发组件重新渲染。

修改后的容器代码片段：

<div
  key={open}
  style={{
    width: "200px",
    border: "1px solid blue",
    ...(!open
      ? {
          height: "54px",
          overflow: "hidden",
        }
      : {
          height: "120px",
          overflowX: "hidden",
          overflowY: "auto",
        }),
  }}
>
  very long text very long text very long text very long text very long
  text very long text very long text text very long text very long text
  text very long text very long text text very long text very long text
</div>

方法对比 #

• useRef方法：仅修改滚动位置，不触发组件重新渲染，性能更优，适合需要保留组件内部状态的场景。
• key属性方法：代码改动极少，但会重建容器元素，适合简单场景或无需保留内部状态的情况。

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