如何在HTML元素跟随鼠标时适配zoom（即scale）缩放

当父元素应用scale变换后，浏览器视口的鼠标坐标（clientX/Y）和父元素内部的坐标空间不再匹配——缩放会改变父元素的坐标缩放比例，直接用视口坐标计算子元素位置就会出现偏移。要解决这个问题，需要基于父元素的实际位置和缩放比例，重新计算鼠标在父元素内部的相对坐标。

核心思路 #

1. 获取父元素的边界矩形信息（包含缩放后的位置和尺寸）
2. 计算鼠标相对于父元素左上角的偏移量
3. 将偏移量除以父元素的缩放比例，得到父元素原始坐标系下的正确位置

修改后的代码示例 #

JavaScript

const nestedBox1 = document.getElementById("nestedBox1");
const box1 = document.getElementById('box1');

// 定义缩放比例，可按需调整
const scale = 0.8;
box1.style.transform = `translate(0px, 0px) scale(${scale})`;

box1.addEventListener('mousemove', (e) => {
    // 获取父元素在视口中的边界信息
    const rect = box1.getBoundingClientRect();
    // 计算鼠标相对于父元素左上角的视口偏移
    const relativeX = e.clientX - rect.left;
    const relativeY = e.clientY - rect.top;
    // 除以缩放比例，还原到父元素原始坐标系的坐标
    const adjustedX = relativeX / scale;
    const adjustedY = relativeY / scale;
    
    nestedBox1.style.transform = `translate(${adjustedX}px, ${adjustedY}px)`;
});

CSS

#box1 {
  width: 500px;
  height: 500px;
  background: red;
  transform: translate(0px, 0px) scale(1);
  position: relative;
}

#nestedBox1 {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  top: 0;
  left: 0;
}

* {
  padding: 0;
  margin: 0;
}

HTML

<div id="box1">
  <div id="nestedBox1"></div>
</div>

关键说明 #

• getBoundingClientRect()：拿到元素在视口中的实时位置（left、top）和缩放后的实际尺寸，这是计算相对坐标的核心依据。
• 坐标修正：父元素缩放后，内部1px对应视口的scale倍像素，所以必须把视口相对坐标除以缩放比例，才能匹配父元素原始的坐标空间。
• 子元素定位：设置为absolute避免子元素占据父元素布局空间，确保translate是基于父元素左上角的偏移。

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