web-dev-qa-db-ja.com

offsetTopとjQuery.offset（）。top

offsetLeftとoffsetTopがすべてのブラウザーで正しく機能しないことを読みました。 jQuery.offset()は、正しい値xbrowserを提供するためにこれを抽象化することになっています。

私がやろうとしているのは、要素が左上を基準としてクリックされた場所の座標を取得することです。

問題は、jQuery.offset().topが実際にFFX 3.6で10進値を与えていることです（IEとChromeでは、2つの値が一致します）。

このフィドル は問題を示しています。下の画像をクリックすると、jQuery.offset().topは327.5を返しますが、offsetTopは328を返します。

offset()は正しい値を返していると考えたいのですが、これはブラウザ間で機能するため、使用する必要があります。しかし、明らかにピクセルの小数をクリックすることはできません。 Math.round()への真のオフセットを決定する適切な方法は、jQueryが返すオフセットですか？代わりにoffsetTopを使用する必要がありますか、または他のメソッドを完全に使用する必要がありますか？

javascriptjqueryoffset
73
Explosion Pills

人々はハーフピクセルをクリックできないと言って正しいと思うので、個人的には、丸みのあるjQueryオフセットを使用します...

13
ChristopheCVB

これが jQuery API Doc が.offset()について言っていることです：

documentを基準にして、一致する要素のセット内の最初の要素の現在の座標を取得するか、すべての要素の座標を設定します。

これが 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のフォールバックです（BTWはjQuery 2ではサポートされていません）
  • docElem.clientTopは、要素（この場合はドキュメント）の上境界線の幅です
  • elem.getBoundingClientRect()は、 資料 viewport（コメントを参照）。小数の値を返す場合があるため、これがバグの原因です。また、 IE <8でバグが発生する可能性があります ページがズームされた場合。小数値を回避するには、位置を計算してみてください 繰り返し

結論

  • 親ノードに関連する座標が必要な場合は、element.offsetTopを使用します。親のスクロールを考慮に入れる場合は、element.scrollTopを追加します。 （または、jQuery 。position（） を使用します（そのライブラリのファンの場合））
  • viewportに関連する座標が必要な場合は、element.getBoundingClientRect().topを使用します。ドキュメントのスクロールを考慮に入れる場合は、window.pageYOffsetを追加します。文書にclientTopを引く必要はありません。文書に境界線がない（通常は境界線がない）ので、document
  • 要素の境界を要素の一部と見なさない場合は、element.clientTopを引きます
72
Jan Turoň

これを試してください：parseInt(jQuery.offset().top, 10)

4
Steve Chan

offsetは、emを測定単位として使用し、font-sizes内の相対%を使用して、非整数にすることができます。

また、offsetが100%でない場合、zoomは整数ではないかもしれないと理論化しますが、それはブラウザーがスケーリングを処理する方法に依存します。

2
Emyr