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

【问题标题】：Custom cursor wrong position after scrolling the page滚动页面后自定义光标位置错误
【发布时间】：2019-08-31 01:14:00
【问题描述】：

我正在尝试获得其中一个带有以下外环的精美圆形光标，例如，当您悬停图像时会发生变化。

我发现大部分代码已经建立在 codepen 上，但是当我应用到更长的页面时，光标似乎偏离了太多像素而无法看到。在您开始滚动之前它工作正常，随着滚动增加，偏移量也会增加，并且如果您滚动它几乎没有用，您看不到光标。

这是修改后的代码笔：https://codepen.io/miguelpppires/pen/xxKLreP

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

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

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

感谢您的任何帮助，谢谢

【问题讨论】：

标签： javascript jquery html css cursor-position

【解决方案1】：

您需要使用clientX 和clientY，因为pageX 和pageY 从页面顶部获取偏移量，而clientX 和clientY 从视口顶部获取偏移量。

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

【讨论】：

【解决方案2】：

我已经解决了使用 pageX 和 pageY 安装的 clientX 和 clientY 的问题。

【讨论】：