Wie kann die Position eines Elements auf der Seite relativ zum Ansichtsfenster (und nicht zum Dokument) richtig ermittelt werden? jQuery.offset
Funktion schien vielversprechend:
Rufen Sie die aktuellen Koordinaten des ersten Elements ab oder legen Sie die Koordinaten jedes Elements in der Gruppe der übereinstimmenden Elemente relativ zum Dokument fest.
Aber das ist relativ zum Dokument. Gibt es eine äquivalente Methode, die Offsets relativ zum Ansichtsfenster zurückgibt?
Antworten:
Schauen Sie sich das Dimensions-Plugin an, speziell
scrollTop()
/scrollLeft()
. Informationen finden Sie unter http://api.jquery.com/scrollTop .quelle
Der einfachste Weg, die Größe und Position eines Elements zu bestimmen, besteht darin, seine Methode getBoundingClientRect () aufzurufen . Diese Methode gibt Elementpositionen in Ansichtsfensterkoordinaten zurück. Es erwartet keine Argumente und gibt ein Objekt mit den Eigenschaften left, right, top und bottom zurück . Die Eigenschaften links und oben geben die X- und Y-Koordinaten der oberen linken Ecke des Elements an, und die Eigenschaften rechts und unten geben die Koordinaten der unteren rechten Ecke an.
element.getBoundingClientRect(); // Get position in viewport coordinates
Überall unterstützt.
quelle
getBoundingClientRect is not a function
$('#myElement')[0].getBoundingClientRect().top
(oder jede andere Position)Hier sind zwei Funktionen zum Abrufen der Seitenhöhe und der Bildlaufbeträge (x, y) ohne Verwendung des Plugins für (aufgeblähte) Abmessungen:
quelle
jQuery.offset
muss mitscrollTop
undscrollLeft
wie in diesem Diagramm gezeigt kombiniert werden:Demo:
quelle
Hier ist eine Funktion, die die aktuelle Position eines Elements im Ansichtsfenster berechnet:
Die Rückgabewerte werden wie folgt berechnet:
Verwendung:
Demo:
quelle
Ich habe festgestellt, dass die Antwort von cballou ab Januar 2014 in Firefox nicht mehr funktioniert. Insbesondere wurde
if (self.pageYOffset)
sie nicht ausgelöst, wenn der Client nach rechts0
gescrollt hatte, aber nicht nach unten - da es sich um eine False-Nummer handelt. Dies blieb eine Weile unentdeckt, da Firefoxdocument.body.scrollLeft
/ unterstützteTop
, aber dies funktioniert bei mir nicht mehr (unter Firefox 26.0).Hier ist meine modifizierte Lösung:
Getestet und funktionsfähig in FF26, Chrome 31, IE11. Funktioniert mit ziemlicher Sicherheit mit älteren Versionen von allen.
quelle