[javascript] offsetTop 대 jQuery.offset (). top

이것은 jQuery API Doc이 말하는 내용입니다 .offset().

첫 번째 요소의 현재 좌표를 취득하거나 유사한 요소에 대하여, 세트에있는 모든 요소의 좌표를 설정 문서 .

이것이 MDN Web API가 말하는 내용입니다 .offsetTop.

offsetTop은 offsetParent 노드 의 상단을 기준으로 현재 요소의 거리를 반환 합니다.

이것은 jQuery v.1.11이 .offset()기본적으로 좌표를 가져올 때 수행하는 작업입니다.

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

• pageYOffset 페이지가 얼마나 스크롤되었는지 직관적으로 말합니다.
• docElem.scrollTop IE <9의 폴백입니다 (jQuery 2에서 지원되지 않는 BTW 임).
• docElem.clientTop 요소 (이 경우 문서)의 위쪽 테두리 너비입니다.
• elem.getBoundingClientRect()문서 뷰포트에 상대적인 좌표를 가져옵니다 (주석 참조). 분수 값을 반환 할 수 있으므로 이것이 버그의 원인입니다. 또한 페이지를 확대 할 때 IE <8에서 버그가 발생할 수 있습니다 . 분수 값을 피하려면 위치를 반복적 으로 계산하십시오.

결론

• 당신은 상대 좌표하려면 부모 노드 , 사용 element.offsetTop. element.scrollTop부모 스크롤을 고려하려면 추가하십시오 . (또는 해당 라이브러리의 팬인 경우 jQuery .position () 사용 )
• 당신은 상대 좌표하려면 뷰포트 를 사용 element.getBoundingClientRect().top. window.pageYOffset문서 스크롤을 고려하려면 추가하십시오 . clientTop문서에 테두리가없는 경우 (보통 그렇지 않은 경우) 문서를 뺄 필요 가 없으므로 문서에 상대적인 위치가 있습니다.
• element.clientTop요소 테두리를 요소의 일부로 간주하지 않으면 빼기