I made a custom cursor with CSS and JavaScript. It works great when you move the cursor, but when I scroll and move the cursor, the custom cursor stays on the top part of the page.

I think it has something to do with scrolling. Not sure.

    .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);
    });

CodePudding user response：

The problem is your elements with the circle class have the default static position.

You'll need to change the position to fixed to position them relative to the initial containing block established by the viewport. So to solve this, just add position: fixed; to .circle.