[使用jQuery滚动时更新鼠标位置

Question

我想知道一种在向下滚动页面后更新鼠标位置的解决方案。

在所附的代码笔中，div将停留在最后一个鼠标位置，然后滚动直到再次移动鼠标。

https://codepen.io/tylerrowens/pen/pojKLqY

$(document).mousemove(function(e){
   $("#image").css({left:e.pageX, top:e.pageY});
});

Answer 1

1）我们需要使用layerX和layerY选项

2）位置也应使用滚动事件进行更新。

$("#scroll").mousemove(function(e){
    $("#hover").css({left:e.originalEvent.layerX, top:e.originalEvent.layerY});
});

$("#scroll").mousewheel(function(e){
    $("#hover").css({left:e.originalEvent.layerX, top:e.originalEvent.layerY});
});

#hover{
    position:absolute;
    font-size:30px;
    margin: 30px;
}

#scroll{
    height: 5000px;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

<div id="scroll">

</div>

<div id="hover">
    hover
</div>