title: How to make custom follow cursor follow Y axis scroll
body: <p>I'm using a bit of HTML &amp; CSS on my squarespace site to create a custom follow cursor. I want to just have a floaty circle with no actual cursor displayed. I've gotten it to mostly work, but when my site scrolls the follow cursor doesn't move with the page scroll and just gets stuck at the top.</p>
  
  <p>And that just caused the follow cursor to stop moving with mouse movement entirely, becoming static on the center of the page.</p>
  
  <p>Injecting HTML &amp; CSS on to squarespace site to create a custom follow cursor:</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-css lang-css prettyprint-override"><code>body {
       background: #161616;
  }
  
  .wrap {
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       overflow: hidden;
  }
  
  #ball {
       width: 60px;
       height: 60px;
       background: none;
       border: 1px solid grey;
       border-radius: 50%;
       position: absolute;
       left: 50%;
       top: 50%;
       margin: -10px 0 0 -10px;
       pointer-events: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="followMouse();"&gt;
       &lt;div class="wrap"&gt;
            &lt;div id="ball"&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;script type="text/javascript"&gt;
  
           var $ = document.querySelector.bind(document);
           var $on = document.addEventListener.bind(document);
           var xmouse, ymouse;
  
           $on('mousemove', function (e) {
               xmouse = e.clientX || e.pageX;
               ymouse = e.clientY || e.pageY;
           });
  
           var ball = $('#ball');
           var x = void 0,
               y = void 0,
               dx = void 0,
               dy = void 0,
               tx = 0,
               ty = 0,
               key = -1;
        
           var followMouse = function followMouse() {
               key = requestAnimationFrame(followMouse);
  
               if(!x || !y) {
                   x = xmouse;
                   y = ymouse;
               } else {
                   dx = (xmouse - x) * 0.125;
                   dy = (ymouse - y) * 0.125;
  
                   if(Math.abs(dx) + Math.abs(dy) &lt; 0.1) {
                        x = xmouse;
                        y = ymouse;
                   } else {
                        x += dx;
                        y += dy;
                   }
               }
            
               ball.style.left = x + 'px';
               ball.style.top = y + 'px';
           };
  
       &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>