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

Question

I'm trying to get one of those fancy circular cursors with a following outside ring, that changes when you hover an image for example.

I found most of the code already built on codepen, but when i applied to a longer page, the cursors seems to be off by few too many pixels to be visible. It works fine until you start scrolling, as the scroll increases so does the offset and makes it pretty much useless if you scroll, you can't see the cursor.

Here is a modified codepen: https://codepen.io/miguelpppires/pen/xxKLreP

I'm almost 100% sure this is the issue, but i have no idea how to fix it:

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

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

Any and all help is appreciated, Thanks

Answer 1

You need to use clientX and clientY , becuase pageX and pageY take the offset from the top of the page and clientX and clientY take the offset from the top of the viewport.

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

Answer 2

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