transform: translate使用绝对坐标实现保留文档流的鼠标跟随效果

方案1：嵌套占位容器（性能最优，零额外计算） #

该方案不需要修改现有交互逻辑，仅需调整DOM结构即可解决所有问题，完全满足保留原有文档流位置的需求：

1. 新增一个外层容器留在文档流占位，你原来给盒子设置的margin、排版相关属性全部迁移到这个容器上，不影响原有页面布局
2. 内部可动的盒子使用fixed定位，坐标直接相对于视口，不需要额外计算元素偏移

代码示例 #

<!-- 外层占位容器，保留原有文档流位置 -->
<div class="box-wrapper">
  <div class="box"></div>
</div>

/* 占位容器，承接原box的文档流相关属性 */
.box-wrapper {
  display: inline-block;
  margin-left: 150px;
  width: 50px;
  height: 50px;
}

.box {
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: blue;
  /* 直接使用鼠标坐标，偏移自身宽高一半实现居中 */
  transform: translate(calc(var(--mouse-x) - 50%), calc(var(--mouse-y) - 50%));
}

// JS逻辑和你最初的版本完全一致，不需要额外计算
document.addEventListener('mousemove', (e) => {
  // 可添加requestAnimationFrame节流优化性能
  requestAnimationFrame(() => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
  });
});

该方案没有任何额外的位置监听开销，哪怕页面有上百个跟随元素也不会出现性能问题，页面内容变动、滚动、窗口 resize 都不会导致效果失效。

方案2：自动更新元素偏移（无需修改DOM结构） #

如果你不能调整DOM结构，可以用ResizeObserver监听元素的布局变化，自动更新偏移量，解决原方案页面变动后失效的问题：

代码示例 #

<!-- 不需要修改原有DOM结构 -->
<div class="box"></div>

/* CSS逻辑和你原有版本一致 */
.box {
  width: 50px;
  height: 50px;
  margin-left: 150px;
  background-color: blue;
  transform: translate(calc(var(--mouse-x) - var(--center-x)), calc(var(--mouse-y) - var(--center-y)));
}

// 全局鼠标坐标监听，仅需绑定一次
document.addEventListener('mousemove', (e) => {
  requestAnimationFrame(() => {
    document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
    document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
  });
});

// 监听元素布局变化，自动更新偏移量
const positionObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const rect = entry.target.getBoundingClientRect();
    entry.target.style.setProperty('--center-x', `${rect.left + rect.width / 2}px`);
    entry.target.style.setProperty('--center-y', `${rect.top + rect.height / 2}px`);
  });
});

// 批量注册所有需要跟随鼠标的元素
document.querySelectorAll('.box').forEach(box => {
  positionObserver.observe(box);
});

ResizeObserver本身性能开销极低，只会在元素布局矩形发生变化时触发回调，哪怕监听上百个元素也不会卡顿，完美解决页面内容变动后效果失效的问题。

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