Circle Follow Mouse Cursor-JS滚动偏移Bug修复求助

问题根源在于原代码使用了clientX/clientY获取鼠标位置——这两个值是鼠标相对于当前视口的坐标，当页面滚动时，视口与文档的偏移会导致基于文档定位的小球位置计算错误，出现跳变或失效。

修复方案 #

直接使用pageX/pageY替换clientX/clientY即可，这两个属性返回鼠标相对于文档左上角的坐标，不受页面滚动影响。

以下是完整的修复后代码：

HTML

<div class="circle"></div>

CSS

body {
  height: 200vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

JavaScript

const circle = document.querySelector('.circle');

document.addEventListener('mousemove', function(e) {
  // 使用pageX/pageY替代clientX/clientY
  circle.style.left = e.pageX + 'px';
  circle.style.top = e.pageY + 'px';
});

备选方案（保留clientX/Y的情况） #

如果需要继续使用clientX/clientY，则需要手动加上页面的滚动偏移量：

document.addEventListener('mousemove', function(e) {
  const scrollOffsetX = window.scrollX || document.documentElement.scrollLeft;
  const scrollOffsetY = window.scrollY || document.documentElement.scrollTop;
  
  circle.style.left = e.clientX + scrollOffsetX + 'px';
  circle.style.top = e.clientY + scrollOffsetY + 'px';
});

补充说明 #

如果小球使用position: fixed定位，原代码的clientX/clientY其实是有效的（因为fixed基于视口），但这类跟随效果通常推荐用absolute+pageX/Y，适配性更强。

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