Wie erhalte ich die oberste Position eines Elements relativ zum Ansichtsfenster des Browsers?

Ich möchte die Position eines Elements relativ zum Ansichtsfenster des Browsers ermitteln (das Ansichtsfenster, in dem die Seite angezeigt wird, nicht die gesamte Seite). Wie geht das in JavaScript?

Danke vielmals

Die vorhandenen Antworten sind jetzt veraltet. Die native getBoundingClientRect()Methode gibt es schon eine ganze Weile und macht genau das, was die Frage verlangt. Außerdem wird es in allen Browsern unterstützt (einschließlich IE 5, wie es scheint!).

Von der MDN-Seite :

Der zurückgegebene Wert ist ein TextRectangle-Objekt, das schreibgeschützte Eigenschaften für links, oben, rechts und unten enthält, die das Rahmenfeld in Pixel beschreiben, wobei sich das obere linke relativ zum oberen linken Rand des Ansichtsfensters befindet .

Du benutzt es so:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

In meinem Fall habe ich, um beim Scrollen sicher zu sein, die window.scroll zur Gleichung hinzugefügt:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

Dadurch kann ich die tatsächliche relative Position des Elements im Dokument ermitteln, auch wenn es gescrollt wurde.

Bearbeiten: Fügen Sie Code hinzu, um das Scrollen der Seite zu berücksichtigen.

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

Das Argument id ist die ID des Elements, dessen Versatz Sie möchten. Adaptiert von einem Quirksmode-Beitrag .

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

Du kannst es versuchen:

node.offsetTop - window.scrollY

Es funktioniert unter Opera mit definiertem Viewport-Meta-Tag.

jQuery setzt dies recht elegant um. Wenn Sie sich die Quelle für jQuery's ansehen offset, werden Sie feststellen, dass dies im Grunde so implementiert ist:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

Die Funktion auf dieser Seite gibt ein Rechteck mit den Koordinaten oben, links, Höhe und Breite eines übergebenen Elements relativ zum Browser-Ansichtsport zurück.

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}

Quelle

Danke für alle Antworten. Es scheint, dass Prototype bereits eine Funktion hat, die dies ausführt (die Funktion page ()). Beim Anzeigen des Quellcodes der Funktion stellte ich fest, dass zuerst die Elementversatzposition relativ zur Seite (dh zur Dokumentoberseite) berechnet und dann das scrollTop davon subtrahiert wird. Weitere Informationen finden Sie im Quellcode des Prototyps.

Ich gehe davon aus, dass ein Element mit der ID von btn1auf der Webseite vorhanden ist und dass jQuery enthalten ist. Dies hat in allen modernen Browsern von Chrome, FireFox, IE> = 9 und Edge funktioniert. jQuery wird nur verwendet, um die Position relativ zum Dokument zu bestimmen.

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

Manchmal getBoundingClientRect()zeigt der Eigenschaftswert des Objekts 0 für IE. In diesem Fall müssen Sie display = 'block'für das Element festlegen . Sie können den folgenden Code für alle Browser verwenden, um den Offset zu erhalten.

Erweitern Sie die jQuery-Funktionalität:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

Verwenden :

var elementOffset = $("#" + elementId).weOffset();