CSS变换放大缩小滚动问题

Question

我有 3 个 div，变换位于第二个 div 上，其中有一个 div。我添加了放大和缩小按钮，但是当我放大时，我无法一直滚动到左侧和顶部，但滚动到右侧和底部时没有问题。我还想要一些填充，以便放大时父 div 会显示一点。我正在尝试复制 pdf 查看器。

使用红色 div 上的变换比例放大之前的初始视图

放大并滚动到右下角总能看到红色的div

放大并一直滚动到左上角，我看不到问题所在的红色 div

import React, { useState } from "react";

function Home() {
  const [scale, setScale] = useState(1);

  const handleZoomIn = () => {
    setScale((prevScale) => prevScale + 0.1);
  };

  const handleZoomOut = () => {
    setScale((prevScale) => prevScale - 0.1);
  };

  return (
    <div
      style={{
        width: "100vw",
        height: "calc(100vh - 80px)",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
               padding: "10px"
      }}
    >
      <button onClick={handleZoomIn}>Zoom In</button>
      <button onClick={handleZoomOut}>Zoom Out</button>
      <div
        style={{
          width: "40%",
          height: "100%",
          background: "yellow",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          overflow:"scroll",
   
        }}
      >
        <div
          style={{
            width: "80%",
            background: "red",
            height: "80%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            transform: `scale(${scale})`,
          }}
        >
          <div
            style={{ width: "95%", background: "blue", height: "95%" }}
          ></div>
        </div>
      </div>
    </div>
  );
}

export default Home;

只是不确定如何解决这个问题

Answer 1

我不确定我是否正确理解并理解了问题，但是我的沙箱

我在放大框中添加了一些内容，以便放大效果更明显。您需要做的是确保容器

<div style={{ width: "80%", height: "80%", overflow: "auto" }}>

具有

overflow: auto

以启用滚动。

我使用

ref

根据比例将放大的 div 居中。我不知道这是否是要求，但对我来说看起来更自然。

我还建议删除像

width: "95%"

这样的幻数，这是一篇很棒的文章，可以阅读有关臭CSS以及如何避免幻数的信息。