Javascript 为什么clientX和Y在滚动条上发生变化？

我创建了一个形状，在鼠标移动时跟随鼠标的x和y坐标。您可以在此处检查结果：

这将很好地工作，并且形状位于鼠标光标的中心。不幸的是，我有一些问题

正如您在中看到的，我有一个部分，位于屏幕顶部。在HTML标记的最顶端，您会注意到一个注释部分。如果删除注释标记，将设置一个新节。当您将鼠标悬停在这些项目上时，结果与之前相同，但当您滚动到下一个部分（即使用三个拇指的部分）时，您会注意到形状不是以鼠标为中心，而是以偏移的方式。只有当你将鼠标悬停在底部时，你才会看到一小块形状

要使圆居中于鼠标光标的中心，我使用以下脚本：

  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var top = offset.top;
  var left = offset.left;

  var mX = (event.clientX - left) - width / 2;
  var mY = (event.clientY - top) - height / 2;

上面的代码来自mouseMove函数，它将在鼠标移动时触发

我的问题是我做错了什么，或者代码中缺少了什么。当只有一个部分时，它会正常工作，但在将另一个部分添加到HTML标记后，它会变得一团糟

pageX和pageY：

相对于浏览器中完全渲染内容区域的左上角。此参考点位于url栏和左上角的“后退”按钮下方。该点可能位于浏览器窗口中的任何位置，如果页面中嵌入了可滚动页面，并且用户移动了滚动条，则该点实际上可以更改位置

因此，请使用pageX和pageY而不是clientX/Y：

  var mX = (event.pageX - left) - width / 2;
  var mY = (event.pageY - top) - height / 2;

欲了解更多详细信息，请阅读以下内容之间的差异

pageX和pageY：

相对于浏览器中完全渲染内容区域的左上角。此参考点位于url栏和左上角的“后退”按钮下方。该点可能位于浏览器窗口中的任何位置，如果页面中嵌入了可滚动页面，并且用户移动了滚动条，则该点实际上可以更改位置

因此，请使用pageX和pageY而不是clientX/Y：

  var mX = (event.pageX - left) - width / 2;
  var mY = (event.pageY - top) - height / 2;

欲了解更多详细信息，请阅读以下内容之间的差异