CSS变换原点+缩放在缩放到光标点时触发偏移

Question

我正在尝试通过使用变换原点和缩放 CSS 属性来实现常规 div 元素（不是画布）的放大/缩小功能。一切都按预期工作，除了更改光标坐标然后调整大小后，存在一些偏移。之后，放大和缩小就可以正常工作了。移动光标后问题再次出现。缩放级别越大，偏移量越大。我很难识别模式并调整传递给转换原点的值。

https://stackblitz.com/edit/web-platform-teguvc?file=script.js

const container = document.querySelector('.container');
const map = document.querySelector('.map');

const scaleStep = 0.2;
let scale = 1;

container.addEventListener('wheel', (event) => {
  event.preventDefault();

  if (!event.ctrlKey) {
    return;
  }

  event.deltaY < 0 ? (scale += scaleStep) : (scale -= scaleStep);

  const originX = container.scrollLeft + event.clientX;
  const originY = container.scrollTop + event.clientY;

  map.style.transformOrigin = `${originX}px ${originY}px`;
  map.style.transform = `scale(${scale})`;
});

我的目标是摆脱这个光标“跳跃”。

Answer 1

您可能想尝试在每次缩放后调整容器的滚动位置，而不是尝试调整变换原点。

container.addEventListener('wheel', (event) => {
  event.preventDefault();

  if (!event.ctrlKey) {
    return;
  }

  const rect = container.getBoundingClientRect();
  const offsetX = event.clientX - rect.left;
  const offsetY = event.clientY - rect.top;

  if (event.deltaY < 0) {
    scale += scaleStep;
  } else {
    scale -= scaleStep;
  }

  map.style.transform = `scale(${scale})`;

  const newScrollLeft = offsetX * scale - rect.width / 2;
  const newScrollTop = offsetY * scale - rect.height / 2;

  container.scrollLeft = newScrollLeft;
  container.scrollTop = newScrollTop;
});