title: How can I fix this jQuery to get mouse position on scroll and make my div smoothly follow my cursor?
body: <p>I've been playing around with some jQuery, trying to combine two pieces of code I've found in tutorials and stack overflow answers. I have a circular div that follows my cursor with a slight delay effect, but because I wasn't telling it to find the mouse position on scroll, it would always get left behind and then catch up when I finished scrolling.</p>
  <p>I've managed to fix it to an extent, but it's really jerky and I'm wondering how I can make it smoother and if possible remove the delay (only on scroll).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
    var mouseX = 0;
    var mouseY = 0;
    var lastScrolledLeft = 0;
    var lastScrolledTop = 0;
    var xp = 0;
    var yp = 0;
  
    $(document).mousemove(function(event) {
      captureMousePosition(event);
    })
  
    $(window).scroll(function(event) {
      if (lastScrolledLeft != $(document).scrollLeft()) {
        mouseX -= lastScrolledLeft;
        lastScrolledLeft = $(document).scrollLeft();
        mouseX += lastScrolledLeft;
      }
      if (lastScrolledTop != $(document).scrollTop()) {
        mouseY -= lastScrolledTop;
        lastScrolledTop = $(document).scrollTop();
        mouseY += lastScrolledTop;
      }
      window.status = "x = " + mouseX + " y = " + mouseY;
    });
  
    function captureMousePosition(event) {
      mouseX = event.pageX;
      mouseY = event.pageY;
      window.status = "x = " + mouseX + " y = " + mouseY;
    }
  
  
    $(document).mousemove(function(e) {
      mouseX = e.pageX - 20;
      mouseY = e.pageY - 20;
    });
  
    setInterval(function() {
      xp += ((mouseX - xp) / 3);
      yp += ((mouseY - yp) / 3);
      $("#circle").css('transform', 'translate(' + xp + 'px, ' + yp + 'px)');
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  html {
    position: relative;
    height: 1000px;
    width: 100%;
    margin: 0;
  }
  
  .circle {
    position: absolute;
    background: #000000;
    opacity: .075;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    pointer-events: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span id="circle" class="circle"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>