Circle Follow Mouse Cursor - Javascript

Question

I've found something I'd really like to implement into my website here - https://codepen.io/clementGir/pen/RQqvQx

It's some code that enabled a ball object to follow your cursor/mouse movements on a website. However, I've noticed an issue with the original code from within that CodePen. If the body height is set to for example 200vh instead of 100vh the cursor jumps down and bugs out when you scroll down below the content.

Change body to the following instead of 100vh to see the issue:

body {
  height: 200vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
}

Can anyone else replicate this and fix it at all? It would be amazing if someone could as it's really something I'd like to use and I'm not great at the JS side of things.

Thanks!

Answer 1

You have to subtract the amount of body that's scrolled out of view, like in my fork of your pen: https://codepen.io/geedix/pen/zYeovQg/4d27d54fad5e2372e3f154b616b79211

 y: e.pageY -window.scrollY - 7