所以我正在尝试使用 React 中的鼠标滚轮重新制作这个版本（从这篇文章中获取和修改）的图像缩放。

问题是，即使在 React 中使用相同的数学和逻辑，它也不能完美运行，我不知道为什么。图像似乎没有缩放光标所在的位置。

这是我的组件：

import React, { useState } from "react";

export default () => {
  const [pos, setPos] = useState({ x: 0, y: 0, scale: 1 });

  const onScroll = (e) => {
    const delta = e.deltaY * -0.01;
    const newScale = pos.scale + delta;

    const ratio = 1 - newScale / pos.scale;

    setPos({
      scale: newScale,
      x: pos.x + (e.clientX - pos.x) * ratio,
      y: pos.y + (e.clientY - pos.y) * ratio,
    });
  };

  return (
    <div onWheelCapture={onScroll}>
      <img
        src="https://source.unsplash.com/random/300x300?sky"
        style={{
          transformOrigin: "0 0",
          transform: `scale(${pos.scale}) translate(${pos.x}px, ${pos.y}px)`,
        }}
      />
    </div>
  );
};

我做了一个 CodeSandbox：https ://codesandbox.io/s/lingering-breeze-ho4do ? file =/ src/App.js

当您的光标在图像的右下角附近时尝试缩放，您会看到问题。