jQuery ermittelt die Position eines Elements relativ zum Fenster

168

Wie kann bei einer gegebenen HTML-DOM-ID die Position eines Elements relativ zum Fenster in JavaScript / JQuery ermittelt werden? Dies ist nicht dasselbe wie relativ zum Dokument oder zum übergeordneten Versatz, da sich das Element möglicherweise innerhalb eines Iframes oder einiger anderer Elemente befindet. Ich muss die Bildschirmposition des Rechtecks ​​des Elements (in Position und Bemaßung) ermitteln, wie es gerade angezeigt wird. Negative Werte sind akzeptabel, wenn sich das Element derzeit außerhalb des Bildschirms befindet (wurde gescrollt).

Dies ist für eine iPad-Anwendung (WebKit / WebView). Immer wenn der Benutzer auf einen speziellen Link in einem tippt UIWebView, soll ich eine Popover-Ansicht öffnen, in der weitere Informationen zum Link angezeigt werden. In der Popover-Ansicht muss ein Pfeil angezeigt werden, der auf den Teil des Bildschirms verweist, der ihn aufruft.

adib
quelle

Antworten:

264

Nehmen Sie zunächst die Versatzposition des Elements und berechnen Sie seine relative Position in Bezug auf das Fenster

Siehe :
1. Offset
2. blättern
3. scrollTop

Sie können es mit dieser Geige versuchen

In den folgenden Codezeilen wird erläutert, wie dies gelöst werden kann

Wenn das Ereignis .scroll ausgeführt wird, berechnen wir die relative Position des Elements in Bezug auf das Fensterobjekt

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

Wenn im Browser gescrollt wird, rufen wir die obige Ereignishandlerfunktion auf

Code-Auszug


function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});
#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>

jterry
quelle
1
Danke für das Skript. Dies scheint auf dem Desktop zu funktionieren, funktioniert aber auf dem iPad nicht. Es scheint, dass $ (Fenster) .scrollTop () und $ (Fenster) .scrollLeft () auf dem iPad nicht aktualisiert werden. Sie können meine Version über jsbin.com/ogiwu4/5
adib
2
Sie werden auf dem iPad nicht aktualisiert, da das Fenster selbst nicht scrollt - der Benutzer scrollt im Fenster herum. Dies ist ohnehin bei einer einfachen Website der Fall. Sie ist sich nicht sicher, welche Website auf mobile Geräte ausgerichtet ist. Dort gibt es wahrscheinlich mehr Optionen.
Eselk
Dies sollte fehlschlagen, wenn sich ein Element in einem anderen scrollbaren Element befindet, z. G. <div>. Sie betrachten nur das Scrollen des Dokuments, nicht aber das Scrollen des anderen Elements.
Ygoe
71

Probieren Sie den Begrenzungsrahmen aus. Es ist einfach:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();
Programmierer
quelle
7
getBoundingClientRect () ist die Antwort auf dieses Problem. Danke Programmierer.
Vlad Lego
1
das hat gut funktioniert. Ich musste nur etwas Code einfügen, um meinen Bildlauf zu reparieren, zusätzlich zu Ihrem scrollLetf und scrollTop: topPos = topPos - $ (Fenster) .scrollTop (); leftPos = leftPos - $ (Fenster) .scrollLeft (); rightPos = rightPos - $ (Fenster) .scrollTop (); bottomPos = bottomPos - $ (Fenster) .scrollLeft ();
Cesar
1
der Tag, an dem die Leute lernen werden, die Dinge in einer nützlichen Methode zu verpacken
mmm
@Noldorin Die Unterstützung auf IE / Edge sieht für mich gut aus: caniuse.com/#feat=getboundingclientrect
Programmierer
1
@prograhammer Mein schlechtes, du hast recht. Ich habe dies auf einer Website gelesen und sein Wort zum Nennwert genommen ... es stellte sich heraus, dass es falsch war (oder zumindest nur auf dem alten IE nicht funktioniert).
Noldorin
6
function getWindowRelativeOffset(parentWindow, elem) {
        var offset = {
            left : 0,
            top : 0
        };
        // relative to the target field's document
        offset.left = elem.getBoundingClientRect().left;
        offset.top = elem.getBoundingClientRect().top;
        // now we will calculate according to the current document, this current
        // document might be same as the document of target field or it may be
        // parent of the document of the target field
        var childWindow = elem.document.frames.window;
        while (childWindow != parentWindow) {
            offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
            offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
            childWindow = childWindow.parent;
        }
        return offset;
    };

Sie können es so nennen

getWindowRelativeOffset(top, inputElement);

Ich konzentriere mich nur für den IE gemäß meiner Anforderung, aber ähnliche können für andere Browser durchgeführt werden

Imran Ansari
quelle
4

Dies klingt eher so, als ob Sie einen Tooltip für den ausgewählten Link wünschen. Es gibt viele jQuery-Tooltips. Probieren Sie jQuery qTip aus . Es hat viele Optionen und ist einfach, die Stile zu ändern.

Andernfalls können Sie die jQuery verwenden, wenn Sie dies selbst tun möchten .position(). Weitere Informationen finden Sie .position()unter http://api.jquery.com/position/

$("#element").position(); gibt die aktuelle Position eines Elements relativ zum übergeordneten Versatz zurück.

Es gibt auch die jQuery .offset (); Dadurch wird die Position relativ zum Dokument zurückgegeben.

jhanifen
quelle
2
Es ist nicht wirklich ein Tooltip, aber ein natives UI-Widget zu öffnen, um Anmerkungen hinzuzufügen.
Adib
1
    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative['scrollTop'] (),
                    r : r.right  + relative['scrollLeft'](),
                    b : r.bottom + relative['scrollTop'] (),
                    l : r.left   + relative['scrollLeft']() 

            }
    }

    // Example
    trbl(e, window);
mmm
quelle
1

Versuchen Sie dies, um die Position eines Elements relativ zum Fenster zu ermitteln.

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });
    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

Weitere Informationen @ Ermitteln Sie mit jQuery die Position eines Elements relativ zum Dokument

Ketan Savaliya
quelle