求助：如何用JavaScript实现围绕鼠标位置缩放Div元素？

我明白你想要实现的是鼠标滚轮滚动时，以鼠标当前位置为中心缩放红色Div的功能——你的思路方向是对的，但在鼠标位置计算、平移量累积和变换顺序这几个关键点上有偏差，导致无法达到预期效果。让我帮你修正代码并解释其中的逻辑：

问题分析 #

1. 鼠标位置计算不准确：原代码用offsetLeft/offsetTop计算鼠标位置，容易受父元素布局影响，不如用getBoundingClientRect()获取元素视口位置更可靠。
2. 平移量未累积：每次缩放都直接设置新的translate值，没有保留之前的平移状态，导致缩放后元素位置重置。
3. 变换顺序与偏移计算逻辑错误：CSS变换是从右到左执行的，且偏移量需要基于缩放前后的比例差来计算，才能保证鼠标锚点不动。

修正后的完整代码 #

JavaScript

window.onload = function() { 
  const STEP = 0.05; 
  const MAX_SCALE = 10; 
  const MIN_SCALE = 0.01; 
  const red = document.getElementById('red'); 
  let scale = 1;
  let tx = 0; // 累积的X轴平移量
  let ty = 0; // 累积的Y轴平移量

  red.parentNode.onmousewheel = function (event) { 
    event.preventDefault(); 

    // 获取红色Div相对于浏览器视口的位置
    const rect = red.getBoundingClientRect();
    // 计算鼠标在红色Div内部的坐标（相对于Div左上角）
    const mouseXInRed = event.clientX - rect.left;
    const mouseYInRed = event.clientY - rect.top;

    const factor = event.wheelDelta / 120; 
    const oldScale = scale; 
    scale = scale + STEP * factor; 
    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale)); 

    // 核心计算：调整平移量，保证鼠标位置在缩放后保持不变
    tx += mouseXInRed * (oldScale - scale);
    ty += mouseYInRed * (oldScale - scale);

    // 应用变换：注意顺序是先平移再缩放（CSS变换从右到左执行）
    red.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; 
  } 
}

CSS

.yellow { 
  background-color: yellow; 
  width: 400px; 
  height: 200px;
  position: relative; /* 让子元素定位参考父容器 */
  overflow: hidden; /* 可选：隐藏超出父容器的部分 */
} 
.red { 
  background-color: red; 
  width: 100px; 
  height: 50px;
  position: absolute; /* 开启绝对定位，方便平移缩放 */
}

HTML

<div class="yellow"> 
  <div id="red" class="red"></div> 
</div>

关键逻辑解释 #

• 累积平移量：用tx和ty保存每次缩放后的平移状态，避免每次缩放重置位置。
• 准确的鼠标位置：getBoundingClientRect()直接获取元素在视口中的位置，计算出鼠标相对于红色Div内部的坐标，不受父元素布局干扰。
• 锚点缩放的核心公式：tx += mouseXInRed * (oldScale - scale)——缩放前，鼠标点在Div内的坐标乘以旧缩放比例，是该点在屏幕上的偏移；缩放后，这个偏移会变成mouseXInRed * scale，两者的差值就是需要调整的平移量，以此保证鼠标点在屏幕上的位置不变。
• 变换顺序：CSS中translate写在scale前面，因为变换是从右到左执行的，这样会先对Div进行缩放，再基于缩放后的坐标系平移，完美实现围绕鼠标点的缩放效果。

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