CSS transform-origin + scale 在缩放到光标点时触发偏移量-解网

问：

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

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})`;
});

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

JavaScript HTML CSS 缩放图

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;
});

CSS transform-origin + scale 在缩放到光标点时触发偏移量

CSS transform-origin + scale triggers offset while zooming to cursor point

评论

评论