Question

我正在尝试在jquery / css中编写自定义光标 - 我已经让它工作正常，我唯一的问题是，如果你滚动而不移动鼠标，光标会失去它的位置。

我尝试添加窗口滚动事件也无济于事。有解决方法吗？

$(window).on('scroll', function(e){
    $('#test').css({
       left:  e.pageX,
       top:   e.pageY
    });
});

Answer 1

显然，由于使用了e.pageX，您仍然失去了光标。您应该将其更改为e.clientX和e.clientY。

#test {
    position: fixed;
    ...
}


$(document).on('mousemove', function(e){
    $('#test').css({
       left:  e.clientX,
       top:   e.clientY,
    });
});

$(window).on('scroll', function(e){ ... });

https://jsfiddle.net/elvinci/pxo7ycb5/14/

Answer 2

您必须将其更改为position:absolute;，而不是制作圈子position:fixed;。然后将您的body scrollTop添加到CSS顶部，如下所示：

#test {
    position: fixed;
    ...
}


$(document).on('mousemove', function(e){
    $('#test').css({
        left:  e.pageX,
        top:   e.pageY - $('body').scrollTop()
    });
});

https://jsfiddle.net/pxo7ycb5/2/

自定义光标移动窗口滚动

2 个答案: