제이쿼리 - 스크롤 바 다루기

$(function() {
	$(".btn1").on("click",function(){
		$(".box").scrollLeft(70);
		$(".box").scrollTop(20);
		
		var left = $(".box").scrollLeft();
		var top = $(".box").scrollTop();
		
		$("#boxResult").html("<p>Left:"+left+",top:"+top+"</p>");
	});
	
	$(".box").on("scroll",function(){
		var left = $(".box").scrollLeft();
		var top = $(".box").scrollTop();
		
		$("#boxResult").html("<p>Left:"+left+",top:"+top+"</p>");
	});
});

/*
-- 요소의 스크롤 위치
  .scrollLeft() : 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
  .scrollTop() : 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
*/

말 그대로 인자에 넣는 숫자에 따라서 스크롤 바를 이동시킨다.

기본 상태는 0 이다.

 

그리고 인자를 안주게 되면 값을 가져 올 수 있다.