[jQuery]제이쿼리 마우스좌표값과 스크롤값 .on 이벤트로 구하기(mousemove(), scroll(), scrollTop(), scrollLeft())

See the Pen [jQuery]마우스좌표값,스크롤값 by kaia (@kaiaakim) on CodePen.

<h1>mousemove</h1>
  <p>X : <span class="posX">0</span></p>
  <p>Y : <span class="posY">0</span></p>
  <!-- 0부분에 글이 들어가게 할 예정 -->

  <div id="wrap">
    <h1>scroll</h1>
    <p>scrollTop : <span class="top">0</span></p>
    <p>scrollLeft : <span class="left">0</span></p>
  </div>

body{
  height: 10000px; width: 5000px;
}
#wrap{
  position: fixed; left: 10px; top: 150px;
}

$(function(){
  $(document).on("mousemove", function(e){ //마우스 좌표값을 e라는 매개변수가 받을것이다
    $(".posX").text(e.pageX); //.text(); ->텍스트가 작성된다는 뜻 //.posX에게 pageX값을 적용
    $(".posY").text(e.pageY); //.posY에게 pageY값을 적용
  });

  $(window).on("scroll", function(){
    const sc_top = $(this).scrollTop(); //this - 스크롤 자신
    const sc_left = $(this).scrollLeft();

    $(".top").text(sc_top);
    $(".left").text(sc_left);
  });
});