[jQuery] jQuery(제이쿼리) 요소의 스크롤 위치 - .scrollLeft(), .scrollTop() 함수

 

 

우리가 자주사용하고 있는 자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 스크롤 위치를 손쉽게 알 수 있고, 스크롤 위치를 설정할 수 있는 함수가 있습니다. 요소의 수직 이나 수평 스크롤 바의 위치를 알 수 있으며, 인수로 전달받은 값으로 수직, 수평의 스크롤 바의 위치를 설정할 수 있습니다. 위치 개념으로는 지역 좌표와 전역 좌표가 있는데 지역 좌표는 부모 노드 기준의 좌표이며, 전역 좌표는 최상위 노드인 Document의 Left와 Top 위치가 0부터 시작합니다.

 

jquery(제이쿼리)의 .scrollLeft() 함수

jQuery(제이쿼리)의 선택한 요소의 수평 스크롤 바의 위치를 얻거나, 선택한 요소의 수평 스크롤 바의 위치를 설정이 가능합니다.

 

//함수 사용방법 
$(select).scrollLeft();     //스크롤바 수평 위치를 가져옴 
$(select).scrollLeft(val);  //스크롤바 수평 위치를 정함

 

//div 요소의 스크롤바 수평 위치를 가져옴 
$( 'div' ).scrollLeft(); 

//div 요소의 스크롤바 수평 위치를 70px으로 정함 
$( 'div' ).scrollLeft(70);

 

jquery(제이쿼리)의 .scrollTop() 함수

jQuery(제이쿼리)의 선택한 요소의 수직 스크롤 바의 위치를 얻거나, 선택한 요소의 수직 스크롤 바의 위치를 설정이 가능합니다.

 

//함수 사용방법 
$(select).scrollTop();    //스크롤바 수직 위치를 가져옴 
$(select).scrollTop(val); //스크롤바 수직 위치를 정함

 

//div 요소의 스크롤바 수직 위치를 가져옴 
$( 'div' ).scrollTop(); 
//div 요소의 스크롤바 수직 위치를 150px으로 정함 
$( 'div' ).scrollTop(150);