제이쿼리 scroll() 이벤트 메서드

 오늘은 스크롤바가 이동할 때마다 이벤트를 발생시키거나, 강제로 scroll 이벤트를 발생시키는데 사용할 수 있는 scroll() 이벤트 메서드에 대해 알아보도록 하겠다.

scroll() 메서드는 크게 두 가지에 사용된다.
 
1. scroll 이벤트를 등록할 때 (즉, 대상 요소의 스크롤바가 이동할 떄마다 이벤트를 발생시키고 싶을 때)
 
이럴 때 사용되는 기본형은 아래와 같다.
$("이벤트 대상").scroll(function() {//코드;});
$("이벤트 대상").on("scroll", function() {//코드;});
 
2. scroll 이벤트를 강제로 발생시킬 때
$("이벤트 대상").scroll();

예시로 만약 스크롤바가 움직였을 경우 해당 이벤트를 타도록 구현해보자.
스크롤바가 움직였을 떄 가로, 세로 스크롤바의 위치를 찍어봄으로써 이벤트를 구현할 것이다.
 
만약 html div 부분이 아래와 같이 
<div id="wrap">
	<p>verticalScroll: <span class="top">0</span>px</p>
    <p>horizontalScroll: <span class="left">0</span>px</p>
</div>
로 구현되어있다면, 
 
해당 구현 코드의 스크립트 부분은 아래와 같다.  
$(window).on("scroll", function(){
	var scroll_vertical=$(this).scrollTop();
    var scroll_horizontal=$(this).scrollLeft();
    
    $(".top").text(scroll_vertical);
    $(".left").text(scroll_horizontal);
});
 
위와 같이 스크립트 부분을 구성해주면 이벤트 대상인 브라우저 즉 window의 수직, 수평 스크롤바가 이동한 만큼의 값을 그대로 출력해줄 수 있다.