滚动页面后自定义光标位置错误

Question

我正在尝试获得一个带有跟随外环的奇特圆形光标，例如，当您将鼠标悬停在图像上时，它会发生变化。

我发现大部分代码已经构建在 codepen 上，但是当我应用于较长的页面时，光标似乎偏离了太多像素而无法看到。它工作得很好，直到你开始滚动，随着滚动的增加，偏移量也会增加，如果你滚动，你就看不到光标了，它几乎毫无用处。

这是修改后的codepen：https://codepen.io/miguelppires/pen/xxKLreP

我几乎 100% 确定这是问题所在，但我不知道如何解决它：

$(document).on('mousemove', function(e) {

$('.cursor, .follower').css({
"transform": "translate3d(" + (e.pageX) + "px, " + (e.pageY) + "px, 0px)"
});

感谢任何和所有帮助， 谢谢

Answer 1

您需要使用

clientX

和

clientY

，因为

pageX

和

pageY

获取距页面顶部的偏移量，而

clientX

和

clientY

获取距视口顶部的偏移量。

$('.cursor, .follower').css({
   "transform": "translate3d(" + (e.clientX) + "px, " + (e.clientY) + "px, 0px)"
});

Answer 2

我已经使用 pageX 和 pageY 代替 clientX 和 clientY 解决了问题。

Answer 3

我已经使用 pageX 和 pageY 代替 clientX 和 clientY 解决了问题。