[제이쿼리]- scroll 이벤트 / 스크롤 이벤트할 때 좌표 값 가져오기

scroll( )이벤트

 

대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생 시킨다. 

* 스크롤은 window객체 안에 들어있다. 

 

[기본형]

- 단독 이벤트
$('이벤트대상').scroll(function(){ 코드 })

- 그룹 이벤트
$('이벤트대상').on("scroll", function(){ 코드 })


- 강제 이벤트
$('이벤트 대상').scroll()

---

예제 ) 스크롤 이벤트할 때 좌표 값 가져오기 

스크롤 위치를 실시간으로 브라우저에 출력시켜주기 

 <div id="wrap">

      <p>scrollTop 좌표 : <span class="top">0</span></p>

      <p>scrollLeft 좌표 : <span class="left">0</span></p>

    </div>

 

  $(window).on("scroll", function () {

          let scr_top = $(this).scrollTop();

          let scr_left = $(this).scrollLeft();

          $(".top").text(scr_top);

          $(".left").text(scr_left);

        });

 

변수에 스크롤탑과 스크롤래프트의 좌표값을 넣어놓고,

아래에 span을 클래스 이름으로 불러와서 변수를 넣어주면 된다. 

 

* 값을 넣을 자리를 html에서 span으로 감싸놓고 클래스 이름 지정해놓고 거기에 값을 text매서드로 

넣어주면 된다.