javascript – Como puedo generar un scroll automático al desplazar la lupa

var lupa = document.getElementById('lupa');
document.addEventListener('mousemove', (e) => {
  var x = e.pageX - 10;
  var y = e.pageY - 10;
  lupa.style = 'left:' + x + 'px; top:' + y + 'px;';
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  cursor: none;
  background: #000;
}

#lupa {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lupa div:nth-child(1) {
  border: 1px outset #2DD122;
  width: 100%;
  position: fixed;
  left: 0;
  animation: border 2s infinite;
  box-shadow: 0 0 3px #2DD122;
}

#lupa div:nth-child(2) {
  border: 1px outset #2DD122;
  height: 100%;
  position: fixed;
  top: 0;
  transform: rotate(90);
  animation: border 2s infinite;
  box-shadow: 0 0 3px #2DD122;
}

#lupa div:nth-child(3) {
  width: 19px;
  height: 19px;
  position: fixed;
  font-size: 25px;
  color: #778cff;
  background: #fff;
  box-shadow: inset -2px -2px 5px #0D50A1;
  border-radius: 50%;
}

@keyframes border {
  25% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>

<body>

  <div id="lupa">
    <div></div>
    <div></div>
    <div class="fas fa-search"></div>
  </div>

</body>

</html>