图像作为光标，滚动时应该移动

Question

我用更大的图像替换了我的光标，以便在网站上有一个大光标。实际上，它运行良好并跟随鼠标，但只要我滚动页面，光标就会停留在与之前相同的位置，并在我再次移动鼠标时立即更新。

我的想法是让鼠标一滚动就移动，而不是稍后传送。

这是代码，您可以理解。感谢您的帮助！

  $(document).on('mousemove', function(e){
    $('#custom-cursor').css({
      left:  e.pageX -30,
      top:   e.pageY-25,
            pointerEvents: 'none'
    });
  });

#custom-cursor{
    width: 230px;
    height: 300px;
    position: absolute;
    background-size: 230px 300px;
    background-image: url("https://i.imgur.com/6uh0F5h.png");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

<p>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br></p>

Answer 1

执行与 mousemove 相同的操作，但然后在文档滚动上：

$(window).scroll(function(){ 
    $('#custom-cursor').css({
      left:  e.pageX -30,
      top:   e.pageY-25,
      pointerEvents: 'none'
    }); 
});

Answer 2

那么，您还需要通过滚动距离的数量来计算鼠标的相对位置，如下所示：

编辑： 我只为垂直滚动做了这件事，您可能还需要为水平滚动做同样的事情。

let lastX, lastY, lastScrolled = 0;;
$(document).on('mousemove', function(e) {
  lastX = e.pageX - 30;
  lastY = e.pageY - 25;
  $('#custom-cursor').css({
    left: e.pageX - 30,
    top: e.pageY - 25,
    pointerEvents: 'none'
  });
});

$(window).scroll(function(event) {
  if (lastScrolled != $(window)
    .scrollTop()) {
    lastY -= lastScrolled;
    lastScrolled = $(window)
      .scrollTop();
    lastY += lastScrolled;
  }
  $('#custom-cursor').css({
    left: lastX,
    top: lastY,
    pointerEvents: 'none'
  });
});

#custom-cursor {
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: 230px 300px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

<p>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the
  page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
  the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
  scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
  the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
  scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
  the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
  scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br></p>

图像作为光标，滚动时应该移动

Image as cursor, should move when you scroll

html

javascript

css

jquery

cursor