为什么 clientX 和 Y 在滚动时会发生变化？答案

【问题标题】：Why does the clientX and Y change on scroll?为什么 clientX 和 Y 在滚动时会发生变化？
【发布时间】：2016-07-28 11:10:10
【问题描述】：

我创建了一个在鼠标移动时跟随鼠标 x 和 y 坐标的形状。你可以在这里查看结果：http://codepen.io/anon/pen/qNKgqo

这样可以正常工作，并且形状位于鼠标光标的中心。不幸的是，我有一些问题。

正如您在demo 中看到的那样，我有一个部分，位于屏幕顶部。在 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 标记后，它就会变得混乱。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

pageX 和 pageY：

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

所以使用 pageX 和 pageY 而不是 clientX/Y：

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

更多细节请阅读clientX/Y and pageX/Y之间的区别？

【讨论】：