javascript - 页面滚动时，圆形鼠标跟随正在移动

Question

嘿，大家好，我正在尝试创建鼠标跟随效果，但我遇到的问题是，当我用鼠标滚动时，整个圆圈会随着页面移动，而不是由于某种原因与鼠标一起移动。有什么线索吗？

 
 
 jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
   
  jQuery(document).mousemove(function(e){
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30; 
  });
    
  setInterval(function(){
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    jQuery(".circle").css({left: xp +'px', top: yp +'px'});
  }, 20);

});

body, html {
	position: relative;
	height: 100%; 
	width : 100%;  
	margin: 0;
  background-color: #000000;
}


.circle {
  position: absolute;
  border: solid 1px #ccc;
	width: 60px; 
	height: 60px; 
  border-radius: 50%; 
  top:0px;
  left:0px;
}

#site {
height:500vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="circle" class="circle"></span>

<div id="site"></div>

Answer 1

您可以尝试使用固定位置，并使用 clientX/Y 而不是 pageX/Y

jQuery(document).ready(function() {

 var mouseX = 0, mouseY = 0;
 var xp = 0, yp = 0;

 jQuery(document).mousemove(function(e){
   mouseX = e.clientX - 30;
   mouseY = e.clientY - 30;
 });

 setInterval(function(){
   xp += ((mouseX - xp)/3);
   yp += ((mouseY - yp)/3);
   jQuery(".circle").css({left: xp +'px', top: yp +'px'});
 }, 20);

});

body, html {
	position: relative;
	height: 100%;
	width : 100%;
	margin: 0;
  background-color: #000000;
}


.circle {
  position: fixed;
  border: solid 1px #ccc;
	width: 60px;
	height: 60px;
  border-radius: 50%;
  top:0px;
  left:0px;
}

#site {
height:500vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="circle" class="circle"></span>

<div id="site"></div>