jquery offset(), position() 함수 알짜만 빼먹기

jquery offset(), position() 함수 알짜만 빼먹기

선택된 객체의 위치값(좌표) 를 얻을 때 사용하는 2개의 함수,

offset()과 postion() 에 대해 알짜만 쏙쏙 뺴먹는 시간을 가져보겠습니다.

 

2개의 함수는 모두 좌표값을 리턴합니다.

하지만 offset은 절대좌표를, position은 상대좌표값을 리턴하죠.

offset은 페이지 상단으로부터 선택된 요소가 보이는 현재 위치값을 설정, 리턴하고

position은 부모 객체로부터 떨어진 상대 좌표값을 리턴합니다.

해깔리는 부분이므로 아래서 자세히 설명하도록 하겠습니다.

 

그럼 우선 offset() 함수에 대해 알아보도록 하죠.

 

[offset]

offset은 선택된 요소의 절대좌표값을 설정하거나 절대좌표값을 리턴하는 함수입니다.

페이지 상단부터의 절대좌표값입니다. (주의)

 

var offset = $(selector).offset();

 

offset 변수에는 $(selector) 의 top과 left 값이 리턴 됩니다.

console.log(offset); 의 결과는 {top:100, left:200} 이런식으로 출력되죠.

 

offset은 절대좌표를 설정할 수도 있습니다.

 

$(selector).offset({top:400, left:200});

 

'$(selector) 의 좌표값을 상단을 기준으로 400pixel, 좌측을 기준으로 200pixel 로 이동하겠다'가 되죠.

 

[position]

position은 선택된 요소의 상대좌표를 리턴하는 함수입니다.

부모 요소로 부터 떨어진 상대좌표를 리턴합니다. (주의)

 

var position = $(selector).position();

 

console.log(position); 의 결과도 offset과 같은 형태이죠. {top:100, left:200}

 

이해를 돕기 위해 예제를 보도록 하겠습니다.

아래와 같은 리스트가 있습니다.

 

position 예제1

자세히 보시면 리스트의 스크롤이 최 상단으로 되어있습니다.

이 경우 table 가장 하단에 있는 tr의 offset과 position 값을 확인해보도록 하겠습니다.

 

offset position 차이

console(행idx, offset, position); 의 순서 입니다.

52번째 행의 offset은 {top: 1782, left: 10}, position의 결과는 {top: 1649, left: 0} 입니다.

offset은 페이지 상단부터의 top이고, position은 부모 요소로부터의 top 값이기 때문에 offset의 값이 더 큰 것을 보실 수 있습니다.

 

그럼 스크롤을 최하단으로 내렸을 때의 값은 어떻게 변하게 될까요?

 

offset position 차이2

 

offset 값만 변한 것을 확인 하실 수 있습니다.

눈에 보이는 절대좌표 값이 변했기 때문이죠.

이처럼 offset의 좌표 값을 설정할때는 주의 하셔아 합니다.

 

 

예제)

스크롤이 있는 테이블의 특정 행으로 스크롤 이동

 - offset을 사용할 경우 스크롤에 따라 절대좌표가 바뀌기때문에 이런 경우에는 position 사용

 

var position = $(".grid tr:eq("+i+")").position();
$('.grid').animate({scrollTop : position.top}, 400);

 

i번째 행이 있는 곳으로 스크롤 이동 시