마우스 이동중에 궁금한점이 있습니다.

Question

mouse 움직임에 따라 같이 이동하는 강의에서 배경의 높이를 지정해주고 스크롤할 시, 스크롤과 함께 같이 따라오지않습니다.  스크롤을 하면서 마우스를 움직여도 같이 따라오게 하려면 어떻게해야 될까요? let  btn_yes ; let  btn_no ; let  cursorItem ; let  circle ; let  x  =   0 ,  y  =   0 ; let  mx  =   0 ,  my  =   0 ; window . onload   =   function   ()   {     btn_yes  =  document . querySelector ( " #yes " ) ;     btn_no  =  document . querySelector ( " #no " ) ;     cursorItem  =  document . querySelector ( " .cursorItem " ) ;     circle  =  cursorItem . querySelector ( " .circle " ) ;      //네 버튼 이벤트     btn_yes . addEventListener ( " mouseover " ,   function   ( e )   {         circle . style . transform  =   " scale(.3) " ;      } )     btn_yes . addEventListener ( " mouseout " ,   function   ( e )   {         circle . style . transform  =   " scale(1) " ;      } )      //아니오 버튼 이벤트     btn_no . addEventListener ( " mouseover " ,   function   ( e )   {         circle . style . transform  =   " scale(.3) " ;      } )     btn_no . addEventListener ( " mouseout " ,   function   ( e )   {         circle . style . transform  =   " scale(1) " ;      } )     window . addEventListener ( " mousemove " ,   function   ( e )   {         x  =  e . clientX ;         y  =  e . clientY ;         cursorItem . style . transform  =   " translate( "   +  x  +   " px,  "   +  y  +   " px ) " ;      } ) ;      loop () ; } function   loop ()   {     mx  +=  (x  -  mx)  *   .09 ;     my  +=  (y  -  my)  *   .09 ;     cursorItem . style . transform  =   " translate( "   +  mx  +   " px,  "   +  my  +   " px ) " ;      requestAnimationFrame (loop) ; }

코딩일레븐 · Answer

x = e.pageX; y = e.pageY; 이렇게 바꾸시면 됩니다. console.log(e) 를 찍어서 보시면 어떤게 들어있는지 보실 수 있습니다.  (위 이미지는 삭제 부탁드릴게요~)