Custom cursor largué par le scrolling

Piskouille
Javascript

Bonjour,

Je débute en frontend et j'essaye depuis quelques jours déjà de customiser mon curseur mais je fais face à un problème que je n'arrive pas à résoudre.
Voilà ce que je fais en JS : 

let mouseCursor = document.querySelector(".cursor"); 
let hasLinks = document.querySelectorAll(".haslink"); 

window.addEventListener('mousemove',cursor);

function cursor(e){
  mouseCursor.style.top = e.pageY + 'px';
  mouseCursor.style.left = e.pageX + 'px';
}

hasLinks.forEach(link =>{
  link.addEventListener('mouseleave', () => {
    mouseCursor.classList.remove('linkCursorPulse');
  });
  link.addEventListener('mouseover', () => {
    mouseCursor.classList.add('linkCursorPulse');
  });
});

avec en CSS : 

body{
    cursor: none;
}

.cursor{
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    background-color: #666;
    opacity: 0.6;
    border-radius: 50%; 
    position: relative; 
    pointer-events: none;
    margin-top: -1rem;
    margin-left: -1rem;
}

.linkCursorPulse{
    transform: scale(1);
    background: #666;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
      height: 2rem;
      width: 2rem;
      margin-top: -1rem;
      margin-left: -1rem;
    }
    50% {

      height: 1rem;
      width: 1rem;
      margin-top: -0.5rem;
      margin-left: -0.5rem;
    }
    100% {
        height: 2rem;
        width: 2rem;
        margin-top: -1rem;
        margin-left: -1rem;
    }
  }

et en HTML :

<body id="hautdepage">
    <div class="cursor"></div>
        <header>
            <a class = "haslink" href="#hautdepage"> 
                <h1 > Titre </h1>
            </a> 
      </header>    
</body>

J'obtiens le résultat souhaité quand je bouge ma souris, mais lorsque je scroll mon curseur ne bouge pas, il retrouve sa place dès que je remets la souris en mouvement. Enfin je dis le résultat souhaité... j'ai un autre problème qui est que lorsque mon curseur pulse, toute la page pulse avec lui ... Si jamais vous avez un indice à ce sujet également :)

Merci d'avance

Aucune réponse