图片平移功能正常但滚轮缩放异常，需实现鼠标中心点缩放

你的缩放功能偏离鼠标位置的核心原因是CSS Transform的执行顺序错误，以及未正确计算缩放前后的平移补偿量。以下是修复后的完整解决方案：

修复后的JavaScript代码 #

var mouseX,
  mouseY,
  mouseTX,
  mouseTY,
  panning = false,
  panEventAdded,
  ts = {
    scale: 1,
    translate: {
      x: 0,
      y: 0
    }
  }

var boxChildWrap = document.querySelector(".aplbox-child");

addPanEvents()

function addPanEvents() {
  panEventAdded = true;
  boxChildWrap.onpointerdown = pointerdownHandler;
  boxChildWrap.onpointerup = pointerupHandler;
  boxChildWrap.onpointercancel = pointerupHandler;
  boxChildWrap.onpointerout = pointerupHandler;
  boxChildWrap.onpointerleave = pointerupHandler;
  document.onpointerup = pointerupHandler;
}

function pointerdownHandler(e) {
  e.preventDefault();
  panning = true;
  mouseX = e.clientX;
  mouseY = e.clientY;
  mouseTX = ts.translate.x;
  mouseTY = ts.translate.y;
  boxChildWrap.onpointermove = pointermoveHandler
};

function pointermoveHandler(e) {
  e.preventDefault();
  const x = e.clientX;
  const y = e.clientY;
  if (!panning) return;
  ts.translate.x = mouseTX + (x - mouseX);
  ts.translate.y = mouseTY + (y - mouseY);
  setTransform();
};

function pointerupHandler(e) {
  panning = false;
  boxChildWrap.onpointermove = null
}

function setTransform() {
  // 关键调整：先执行scale再执行translate，符合鼠标中心缩放的逻辑
  const transform = `scale(${ts.scale}) translate(${ts.translate.x}px, ${ts.translate.y}px) translate3d(0,0,0)`;
  boxChildWrap.style.transform = transform;
  boxChildWrap.style.transition = '';
}

boxChildWrap.addEventListener("wheel", function(e) {
  e.preventDefault(); // 阻止页面滚动干扰
  const containerRect = boxChildWrap.getBoundingClientRect();
  // 计算鼠标相对于容器左上角的坐标
  const mouseXInContainer = e.clientX - containerRect.left;
  const mouseYInContainer = e.clientY - containerRect.top;

  // 计算缩放比例
  const scaleFactor = (e.wheelDelta > 0 || e.deltaY < 0) ? 1.2 : 1/1.2;
  const oldScale = ts.scale;
  ts.scale *= scaleFactor;
  // 限制缩放范围，避免过度缩放（可选）
  ts.scale = Math.max(0.5, Math.min(5, ts.scale));

  // 核心补偿计算：确保缩放后鼠标位置对应的图片区域不变
  ts.translate.x = ts.translate.x * (ts.scale / oldScale) + mouseXInContainer * (1 - ts.scale / oldScale);
  ts.translate.y = ts.translate.y * (ts.scale / oldScale) + mouseYInContainer * (1 - ts.scale / oldScale);

  setTransform();
})

关键修复点说明 #

1. 调整Transform执行顺序
   CSS Transform是从右到左执行的，将原来的translate(...) scale(...)改为scale(...) translate(...)，这样缩放操作不会放大平移的偏移量，为后续的坐标计算提供正确的基础。

2. 修正平移补偿公式
   通过计算鼠标在容器内的相对位置，结合缩放比例的变化，反向调整平移量，确保缩放前后鼠标点对应的图片区域始终保持在屏幕同一位置，公式逻辑：

   • 旧平移量按缩放比例缩放
   • 加上鼠标位置的补偿值，抵消缩放带来的偏移

3. 添加页面滚动阻止
   在滚轮事件中加入e.preventDefault()，避免图片缩放时触发页面整体滚动，提升交互体验。

配套CSS和HTML代码 #

.aplbox-child {
  max-height: 100% !important;
  max-width: 100% !important;
  position: relative;
  height: 100vh; /* 使用视口高度方便测试，可根据实际布局调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  touch-action: none;
}

.aplbox-child img {
  user-select: none;
  display: block;
  max-height: 100%;
  max-width: 100%;
}

<div class="aplbox-child aplbox-image"><img src="https://picsum.photos/1280/720"></div>

内容的提问来源于stack exchange，提问作者Toniq