JavaScript自定义鼠标光标固定左上角问题排查求助

问题根源 #

你的自定义光标固定在左上角，核心问题有两个：

• #trailer元素同时设置了left:0/top:0和transform: translate()，而animate()方法的transform会直接覆盖原本的位移属性，导致光标位置重置。
• 每次鼠标移动都触发新的缩放动画，多个动画叠加后，光标无法保持正确的跟随位置。

修复方案 #

1. 调整CSS定位方式 #

把#trailer的固定定位改为用transform控制初始位置，避免样式冲突：

#trailer {
  height: 20px;
  width: 20px;
  background-color: white;
  border-radius: 20px;
  position: fixed;
  /* 移除left和top，用transform初始化位置实现光标中心对准鼠标 */
  transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

2. 合并位移与缩放动画 #

修改JavaScript，让缩放动画基于当前的位移状态，避免覆盖translate属性，同时清除旧动画防止叠加：

const trailer = document.getElementById("trailer");

window.onmousemove = e => {
  const x = e.clientX;
  const y = e.clientY;
  const interactable = e.target.closest(".interactable");
  const interacting = interactable !== null;

  // 更新基础位置
  trailer.style.transform = `translate(${x}px, ${y}px)`;
  // 传入当前位置执行缩放动画
  changeScale(interacting, x, y);
}

const changeScale = (interacting, x, y) => {
  // 合并位移和缩放的transform属性
  const keyframes = {
    transform: `translate(${x}px, ${y}px) scale(${interacting ? 2 : 1})`
  }

  // 清除之前的动画，避免多个动画叠加导致位置混乱
  trailer.getAnimations().forEach(anim => anim.cancel());
  
  trailer.animate(keyframes, {
    duration: 800,
    fill: "forwards"
  });
}

3. 优化光标显示逻辑 #

移除body:hover>#trailer的opacity触发，直接设置光标默认显示，避免初始隐藏问题：

#trailer {
  /* ...其他样式 */
  opacity: 1;
}

修改完成后，光标就能正常跟随鼠标移动，并且在悬停.interactable元素时平滑放大。

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