При перемещении страницы прокручивается круговая мышь.

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>