我用CSS和JavaScript制作了一个自定义光标。移动光标时效果很好，但是当我滚动和移动光标时，自定义光标停留在页面的顶部。

我想这和滚动有关。不确定。

    .circle {
      width: 30px;
      height: 30px;
      /*background: red;*/
      border-radius: 50%;
      position: absolute;
      background-image: url("https://uploads-ssl.webflow.com/62cd0bbffd2df1e4ace9deb5/631ab8d8fcc0141ca81b1ee1_favicon.svg");
      background-size: 20px 20px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      animation: fade 1s linear;
    }
    @keyframes fade {
      from {
        scale: 1.1;
        transform: rotate(0deg);
      }
      to {
        scale:0;
        transform: rotate(360deg);
      }
    
      .cc {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        position: fixed;
        transform: translate(-50%, -50%);
        pointer-events: none;
        transition: width .3s, height .3s, opacity .3s;
        background-image: url("https://uploads-ssl.webflow.com/62cd0bbffd2df1e4ace9deb5/631ab8d8fcc0141ca81b1ee1_favicon.svg");
        background-size: 20px 20px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        animation: fade 1s linear;
      }
      @keyframes fade {
        from {
          scale: 1.1;
          transform: rotate(0deg);
        }
        to {
          scale:0;
          transform: rotate(360deg);
        }
      }

    class Circle {
      constructor() {
        this.circle = document.createElement("div");
        this.colors = [
          "03045e",
        ];
      }
      draw(x, y) {
        this.circle.classList.add("circle");
        this.circle.style.top = `${y}px`;
        this.circle.style.left = `${x}px`;
        this.circle.style.background = `#${
          this.colors[Math.floor(Math.random() * this.colors.length - 1)]
        }`;
        document.querySelector("body").append(this.circle);
      }
    }
    
    window.addEventListener("mousemove", function (e) {
      let c = new Circle();
      c.draw(e.clientX, e.clientY);
      let cicles = document.querySelectorAll(".circle");
      setTimeout(() => {
        c.circle.remove();
      }, 800);
    });