Ich habe das gelesen offsetLeft
und offsetTop
arbeite nicht in allen Browsern richtig. jQuery.offset()
soll eine Abstraktion dafür bereitstellen, um den korrekten Wert xbrowser bereitzustellen.
Ich versuche, die Koordinaten zu ermitteln, an denen ein Element relativ links oben im Element angeklickt wurde.
Das Problem ist, jQuery.offset().top
dass ich in FFX 3.6 tatsächlich einen Dezimalwert bekomme (in IE und Chrome stimmen die beiden Werte überein).
Diese Geige zeigt das Problem. Wenn Sie auf das untere Bild klicken, wird jQuery.offset().top
327,5, aber offsetTop
328 zurückgegeben.
Ich würde gerne denken, dass dies offset()
den richtigen Wert zurückgibt und ich sollte ihn verwenden, da er in allen Browsern funktioniert. Menschen können jedoch offensichtlich nicht auf Dezimalstellen von Pixeln klicken. Ist der richtige Weg, um den wahren Versatz zu Math.round()
dem Versatz zu bestimmen, den jQuery zurückgibt? Sollte ich offsetTop
stattdessen oder eine andere Methode verwenden?
quelle
Dies ist, was jQuery API Doc über Folgendes sagt
.offset()
:Dies sagt die MDN-Web-API über
.offsetTop
:Dies ist, was jQuery v.1.11 im
.offset()
Grunde tut, wenn Sie die Koordinaten erhalten: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
Intuitiv sagt, wie viel die Seite gescrollt wurdedocElem.scrollTop
ist der Fallback für IE <9 (die in jQuery 2 übrigens nicht unterstützt werden)docElem.clientTop
ist die Breite des oberen Randes eines Elements (in diesem Fall des Dokuments)elem.getBoundingClientRect()
die Koordinaten relativ zum bekommtDokumentAnsichtsfenster (siehe Kommentare). Es kann Bruchwerte zurückgeben, daher ist dies die Quelle Ihres Fehlers. Es kann auch einen Fehler im IE <8 verursachen, wenn die Seite gezoomt wird. Versuchen Sie, die Position iterativ zu berechnen, um Bruchwerte zu vermeidenFazit
element.offsetTop
. Fügenelement.scrollTop
Sie hinzu, wenn Sie das übergeordnete Scrollen berücksichtigen möchten. (oder verwenden Sie jQuery .position (), wenn Sie ein Fan dieser Bibliothek sind)element.getBoundingClientRect().top
. Fügenwindow.pageYOffset
Sie hinzu, wenn Sie das Scrollen des Dokuments berücksichtigen möchten. Sie müssen keine Dokumente subtrahieren,clientTop
wenn das Dokument keinen Rand hat (normalerweise nicht), sodass Sie eine Position relativ zum Dokument habenelement.clientTop
Sie, wenn Sie den Elementrand nicht als Teil des Elements betrachtenquelle
Element.getBoundingClientRect()
gibt Positionen relativ zum Ansichtsfenster , nicht zum DokumentVersuche dies:
parseInt(jQuery.offset().top, 10)
quelle
Es ist möglich, dass das
offset
eine nicht ganze Zahl sein kann, dieem
als Maßeinheit verwendet wird, relativfont-sizes
in%
.Ich theoretisiere auch, dass dies
offset
möglicherweise keine ganze Zahl ist, wenn dies nicht der Fallzoom
ist,100%
aber das hängt davon ab, wie der Browser mit der Skalierung umgeht.quelle
Sie können verwenden
parseInt(jQuery.offset().top)
, um denint
Wert Integer (primitiv - ) in allen Browsern immer zu verwenden.quelle