offsetTop 대 jQuery.offset (). top

나는 읽었습니다 offsetLeft및 offsetTop모든 브라우저에서 제대로 작동하지 않습니다. jQuery.offset()올바른 값 xbrowser를 제공하기 위해 추상화를 제공해야합니다.

내가하려는 것은 요소의 왼쪽 상단을 기준으로 요소가 클릭 된 위치의 좌표를 얻는 것입니다.

문제는 jQuery.offset().top실제로 FFX 3.6에서 10 진수 값을 제공 한다는 것 입니다 (IE와 Chrome에서는 두 값이 일치 함).

이 바이올린 은 문제를 나타냅니다. 하단 이미지를 클릭하면 jQuery.offset().top327.5를 offsetTop반환 하지만 328을 반환합니다.

이것이 offset()올바른 값을 반환 한다고 생각하고 브라우저에서 작동하므로 사용해야합니다. 그러나 사람들은 분명히 소수의 픽셀을 클릭 할 수 없습니다. Math.round()jQuery가 반환하는 오프셋에 대한 실제 오프셋을 결정하는 적절한 방법 이 있습니까? offsetTop대신 사용해야합니까 , 아니면 다른 방법을 완전히 사용해야 합니까?

사람들이 절반 픽셀을 클릭 할 수 없다고 말하는 것이 맞다고 생각하므로 개인적으로 둥근 jQuery 오프셋을 사용합니다.

이것은 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요소 테두리를 요소의 일부로 간주하지 않으면 빼기

이 시도: parseInt(jQuery.offset().top, 10)

가 가능 offset하여, 비정 수 있었다 em측정 부, 상대적으로 font-sizes에서 %.

나는 또한가 offset아닌 경우 정수 zoom가 아닐 수도 100%있지만 브라우저가 스케일링을 처리하는 방법에 따라 다르다는 이론도 있습니다 .

를 사용 parseInt(jQuery.offset().top)하여 int모든 브라우저 에서 항상 정수 (기본- ) 값을 사용할 수 있습니다 .