滾動頁面后自定義光標位置錯誤

Question

我正在嘗試使用以下外環獲得那些花哨的圓形光標之一，例如，當您懸停圖像時會發生變化。

我發現大部分代碼已經建立在 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)"
});

任何和所有的幫助表示贊賞，謝謝

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 的問題。