如何实现Div基于父容器而非页面坐标跟随鼠标，滚动不偏移

问题根源 #

你当前使用的e.pageX/e.pageY是基于整个文档的坐标，页面滚动后，文档的滚动距离会让这个坐标和视口内光标的实际位置脱节；再加上如果.cursor__ball--big用的是absolute定位，元素会跟着文档滚动，自然就和光标错开了。

修复步骤 #

1. 给目标元素设置fixed定位，让它相对于浏览器视口固定，不随页面滚动移动
2. 改用e.clientX/e.clientY获取光标坐标，这两个值是相对于当前视口的，滚动时不会产生偏差

修改后的JS代码：

document.addEventListener('mousemove', function(e) {
  const circle = document.querySelector('.cursor__ball--big');
  const left = e.clientX;
  const top = e.clientY;
  circle.style.left = left + 'px';
  circle.style.top = top + 'px';
});

对应的CSS要确保包含这行关键设置：

.cursor__ball--big {
  position: fixed;
  /* 保留你原来的宽高、背景、圆角等样式 */
  pointer-events: none; /* 可选，防止这个元素挡住页面其他交互 */
}

额外优化 #

如果想让元素中心对准光标（而非左上角对齐），可以调整坐标计算：

circle.style.left = (left - circle.offsetWidth / 2) + 'px';
circle.style.top = (top - circle.offsetHeight / 2) + 'px';

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