React缩放时如何保持容器居中且内容溢出可正常滚动

无法滚动到内容顶部/左侧的问题来自两个核心原因：

• transform: scale属于视觉变换，不会修改元素在文档流中实际占据的尺寸，父容器无法感知缩放后的真实内容大小，滚动条触发逻辑异常。
• 原父容器使用flex居中，当内容尺寸超过容器时，flex布局默认会将溢出的左、上部分裁剪在可视区域外，这部分内容无法通过滚动访问。

修改后的完整可运行代码如下：

import { useState } from "react";

export default function App() {
  const [scale, setScale] = useState(0.3);
  // 原始内容固定尺寸
  const originWidth = 600;
  const originHeight = 600;

  const updateScale = (e) => {
    setScale(parseFloat(e.target.value));
  };

  return (
    <div style={{ width: "100%", height: "100vh", background: "#DE5833" }}>
      {/* 缩放滑块控件 */}
      <div style={{ position: "absolute", zIndex: 50 }}>
        <input
          type="range"
          min="0.1"
          max="1.5"
          step="0.01"
          value={scale}
          onChange={updateScale}
        />
      </div>
      {/* 滚动容器：负责溢出滚动、内容小于视口时的居中逻辑 */}
      <div
        style={{
          width: "100%",
          height: "100vh",
          overflow: "auto",
          display: "grid",
          placeItems: "center",
        }}
      >
        {/* 尺寸适配容器：动态宽高和缩放后的内容视觉尺寸一致，让滚动条正确识别溢出范围 */}
        <div
          style={{
            width: originWidth * scale,
            height: originHeight * scale,
          }}
        >
          {/* 实际缩放的内容块 */}
          <div
            style={{
              width: originWidth,
              height: originHeight,
              background: "#2563EB",
              transform: `scale(${scale})`,
              transformOrigin: "left top",
            }}
          ></div>
        </div>
      </div>
    </div>
  );
}

• 用grid布局的place-items: center实现内容小于视口时的居中效果，内容溢出时grid布局不会裁剪起始侧内容，四个方向的溢出都可以滚动访问。
• 新增的尺寸适配容器会动态跟随缩放比例调整宽高，和缩放后的内容实际视觉尺寸完全一致，滚动条可以正确判定溢出范围。
• 内容块设置transformOrigin: left top，确保缩放时和外层适配容器的位置完全对齐，不会出现偏移。

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