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

jucafojl 于 8个月前发布在其他

关注(0)|答案(1)|浏览(105)

我试图通过使用transform origin和scale CSS属性来实现常规div元素（不是canvas）的放大/缩小功能。一切都按预期工作，除了在更改光标的坐标然后重新设置后，有一些偏移。之后，放大和缩小工作正常。移动光标后问题重复出现。缩放级别越大，偏移越大。我在识别模式和调整传递给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})`;
});

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

Html

来源：https://stackoverflow.com/questions/77247677/css-transform-origin-scale-triggers-offset-while-zooming-to-cursor-point

1条答案

按热度按时间

ruarlubt1#

您可能希望尝试在每次缩放后调整容器的滚动位置，而不是尝试调整transform-origin。

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

赞(0）回复(0）举报 8个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答