自定义鼠标跟随对象滚动时不可见的问题排查

尝试通过修改transform的translate属性实现自定义对象跟随鼠标，页面加载后首屏显示和移动正常，但滚动页面后，虽然transform属性已变化，对象却消失，返回顶部后又重新出现。使用position: fixed布局，期望滚动时光标位置保持不变，滚动停止或鼠标移动时，对象从当前位置开始跟随。

问题出在坐标参考系不匹配：

• pageX/pageY是相对于整个文档的坐标，包含了页面滚动的偏移距离
• position: fixed的元素是相对于浏览器视口定位的，页面滚动后，pageY会累加滚动距离，导致translate的Y值过大，元素被移出视口范围，因此看起来消失了

将坐标从pageX/pageY替换为clientX/clientY，这两个值是相对于浏览器视口的坐标，和fixed定位的参考系完全匹配。同时统一使用事件参数e，避免依赖全局event对象。

JavaScript #

document.addEventListener("mousemove", e => {
  document.querySelector('.mover').style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});

CSS #

.mover {
  width: 50px;
  height: 50px;
  position: fixed;
  left: -8px;
  top: -6px;
  transition-duration: .15s;
  transition-timing-function: ease-out;
}

html {
  cursor: none;
}

body {
  background: #F5F9FF;
  height: 3000px;
}

HTML #

<div class="mover">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"></path>
  </svg>
</div>

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