Jak uzyskać najwyższą pozycję elementu względem widocznego obszaru przeglądarki?

Chcę uzyskać pozycję elementu względem rzutni przeglądarki (rzutnia, w którym wyświetlana jest strona, a nie cała strona). Jak można to zrobić w JavaScript?

Wielkie dzięki

Istniejące odpowiedzi są teraz nieaktualne. Metoda rodzima getBoundingClientRect()istnieje już od jakiegoś czasu i robi dokładnie to, o co chodzi w pytaniu. Dodatkowo jest obsługiwany we wszystkich przeglądarkach (w tym IE 5, jak się wydaje!)

Ze strony MDN :

Zwracana wartość jest obiektem TextRectangle, który zawiera właściwości tylko do odczytu left, top, right i bottom opisujące ramkę (w pikselach), z lewym górnym względem lewego górnego obszaru widoku .

Używasz tego w ten sposób:

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

W moim przypadku, dla pewności co do przewijania, do równania dodałem okno window.scroll:

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

To pozwala mi uzyskać rzeczywistą względną pozycję elementu w dokumencie, nawet jeśli został przewinięty.

Edycja: Dodaj kod do konta do przewijania strony.

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);
    }
}

Argument id to identyfikator elementu, którego offset chcesz. Zaczerpnięte z dziwacznego postu .

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

Możesz spróbować:

node.offsetTop - window.scrollY

Działa w przeglądarce Opera ze zdefiniowanym metatagiem viewport.

jQuery implementuje to dość elegancko. Jeśli spojrzysz na źródło jQuery offset, zauważysz, że jest w zasadzie tak zaimplementowany:

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

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

Funkcja na tej stronie zwróci prostokąt z górną, lewą, współrzędnymi wysokości i szerokości przekazanego elementu względem portu widoku przeglądarki.

    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;
}

źródło

Dzięki za wszystkie odpowiedzi. Wygląda na to, że Prototype ma już funkcję, która to robi (funkcja page ()). Przeglądając kod źródłowy funkcji stwierdziłem, że najpierw oblicza on przesunięcie elementu względem strony (tj. Do góry dokumentu), a następnie odejmuje od tego scrollTop. Więcej szczegółów w kodzie źródłowym prototypu.

Zakładam, że na btn1stronie internetowej istnieje element o identyfikatorze , a także, że zawiera jQuery. Działa to we wszystkich nowoczesnych przeglądarkach Chrome, FireFox, IE> = 9 i Edge. jQuery jest używany tylko do określenia pozycji względem dokumentu.

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

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

Czasami getBoundingClientRect()wartość właściwości obiektu pokazuje 0 dla IE. W takim przypadku musisz ustawićdisplay = 'block' dla elementu. Możesz użyć poniższego kodu dla wszystkich przeglądarek, aby uzyskać przesunięcie.

Rozszerz funkcjonalność jQuery:

(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));

Posługiwać się :

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