[자바스크립트] 마우스 커서따라 움직이는 요소 채택완료

아래 소스를 적용해서 만들어진 상태인데요.

왜 스크롤을 내리면 스크롤 높이만큼 '마우스를 따라다니는 요소'가 벌어지는 걸까요?

[code]

<!-- 마우스 커서 -->
<div class="cursor_wrap">
    <div class="cursor"><span class="circle"></span></div>
</div>

<script>
    $(window).on("mousemove", (e) => {
        $(".cursor").css({
            top: e.pageY + "px",
            left: e.pageX + "px"
        });
        $('a, select, label, input, button, .tabs li').hover(function() {
            $('.cursor').addClass('mouse_hover');
        }, function(){
            $('.cursor').removeClass('mouse_hover');
        });
    });

/* 
    마우스 커서 
*/
.cursor_wrap {position: absolute; left: 0; top: 0; width: 30px; height: 30px; pointer-events: none; z-index: 10000; }
.cursor_wrap .cursor {position: fixed; }
.cursor_wrap .cursor .circle { display: block; opacity: 0.15; background-color: none; width: 30px; height: 30px; border-radius: 50%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);}
.cursor_wrap .cursor.mouse_hover .circle { background-color: rgb(127, 127, 127);  transform: translate(-50%, -50%) matrix(3, 0, 0, 3, 0, 0); }

</script>

[code]