offsetTop 대 jQuery.offset().top

offsetTop 대 jQuery.offset().top

나는 그것을 읽었습니다.offsetLeft그리고.offsetTop일부 브라우저에서는 제대로 작동하지 않습니다.jQuery.offset()올바른 값 x 브라우저를 제공하기 위해 추상화를 제공해야 합니다.

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

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

이 바이올린은 문제를 나타냅니다.하단 이미지를 클릭하면,jQuery.offset().top하지만 327.5를 반환합니다.offsetTop328을 반환합니다.

는 라고생고싶다습니하각▁that다라고 생각하고 싶습니다.offset()올바른 값을 반환하고 있으며 브라우저 간에 작동하기 때문에 사용해야 합니다.하지만 사람들은 분명히 소수의 픽셀을 클릭할 수 없습니다. 오 셋 프 결 적 방 같 다 습 니 다 과 음 은 제 법 한 절 을 는 하 정 ▁to ▁offset ▁the ▁true ▁to ▁is 다 니 ▁the 습 같▁way ▁proper ▁determine 실 제 과 다Math.round()jQuery가 반환하는 오프셋?을 사용해야 ?offsetTop대신에, 아니면 완전히 다른 방법?

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

첫 번째 요소의 현재 좌표를 가져오거나 일치하는 요소 집합에서 문서를 기준으로 모든 요소의 좌표를 설정합니다.

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

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

v 파일 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.scrollTopIE<9(jQuery 2에서 BTW가 지원되지 않음)에 대한 폴백입니다.
• docElem.clientTop요소의 상단 테두리 너비입니다(이 경우 문서).
• elem.getBoundingClientRect() 문서 뷰포트에 상대적인 좌표를 가져옵니다(주석 참조).분수 값을 반환할 수 있으므로 버그의 원인이 됩니다.또한 페이지를 확대할 때 IE<8에서 버그가 발생할 수 있습니다.분수 값을 피하려면 위치를 반복적으로 계산합니다.

결론

• 상위 노드에 상대적인 좌표를 지정하려면element.offsetTop.더하다element.scrollTop부모 스크롤을 고려할 수 있습니다.(또는 해당 라이브러리의 팬인 경우 jQuery .position()을 사용합니다.)
• 뷰포트와 관련된 좌표를 원하는 경우element.getBoundingClientRect().top.더하다window.pageYOffset문서 스크롤을 고려하려는 경우.문서의 문의값뺄필없습다니가를 뺄 가 없습니다.clientTop문서에 테두리가 없는 경우(일반적으로 테두리가 없는 경우), 문서와 관련된 위치가 있는 경우
• 빼기element.clientTop요소 테두리를 요소의 일부로 간주하지 않는 경우

사람들이 반 픽셀을 클릭할 수 없다는 당신의 말이 옳다고 생각합니다. 그래서 저는 개인적으로 둥근 jQuery 오프셋을 사용할 것입니다.

사용해 보십시오.parseInt(jQuery.offset().top, 10)

가능성이 있습니다.offset비흡연자일 수 있음, 사용em측정 단위로서, 상대적font-sizes에%.

나는 또한 이론을 세웁니다.offset정수가 아닐 수도 있습니다.zoom그렇지 않은100%브라우저가 스케일링을 처리하는 방식에 따라 다릅니다.

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

언급URL : https://stackoverflow.com/questions/6777506/offsettop-vs-jquery-offset-top