为什么clientX和Y滚动变化？

Question

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

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

如您在演示中所见，我有一个部分位于屏幕顶部。在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标记后，它将被弄乱。

Answer 1

pageX和pageY：

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

因此，请使用pageX和pageY代替clientX / Y：

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

有关更多详细信息，请阅读clientX / Y和pageX / Y之间的区别？