javascript - 缩放时如何保持包装器居中？

Question

我正在尝试使用输入滑块进行放大，我希望在内容溢出滚动条时出现，并将内容定位为居中。

import { useState } from "react";

export default function App() {
  const [scale, setScale] = useState(0.3);

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

  return (
    <div style={{
      background:"#DE5833",
      width:"100%",
      height:"100vh"
    }}>
      <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={{
        background:"#DE5833",
        width:"100%",
        height:"100%",
        display:"flex",
        justifyContent:"center",
        alignItems : "center",
        transform: `scale(${scale})`,
      }}>
        <div
          style={{
            width: 600,
            height: 600,
            background:"#2563EB"
          }}
        >
        </div>
      </div>
    </div>
  );
}

这是我想要实现的行为示例 https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150060/screen-capture_dernvs.mkv

我可以将内容居中，但我不能像这样滚动到顶部或左侧： https ://res.cloudinary.com/dv8aesvfs/video/upload/v1630150115/screen-capture_1_aas9k8.mkv

你可以在这里试试：codesandbox

标签： javascripthtmlcssreactjs