Tracked mouse position gets lost when scrolling

Question

I'm using the following snippet to track the mouse position and to append some styles:

const blob = document.getElementById("blob");

window.onpointermove = event => { 
  const { clientX, clientY } = event;
  
  blob.animate({
    left: `${clientX}px`,
    top: `${clientY}px`
  }, { duration: 3000, fill: "forwards" });
}

Everything works as I wish until I start scrolling. Then the positions sticks to where I started scrolling and wont catch up. You can see the demo here: https://wordpress-318817-3165474.cloudwaysapps.com/index.php/version-3/

I'm stuck and don't know what I did wrong. I hope someone can help me out.

so account for the window scroll position. https://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll — epascarello, Feb 20 '23 at 16:10

Arash Seifi · Answer 1 · 2023-02-20T16:24:21.297

 const blob = document.getElementById("blob");

        window.onmousemove = event => {
            mouseX = event.pageX -30;
            mouseY = event.pageY -30; 

            
                blob.animate({
                    left: `${mouseX}px`,
                    top: `${mouseY}px`
                }, { duration: 3000, fill: "forwards" });
              
            
            
        }

 body {
            background-color: aquamarine;
            height: 2000px;
        }
        #blob {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: green;
        }

<div id="blob"></div>

So i think that by scrolling your mouse position is not changed,so it keeps the same position

Tracked mouse position gets lost when scrolling

1 Answers1