Bir öğenin tarayıcı görünümüne göre en üst konumuna nasıl getirilir?

Bir öğenin, tarayıcının görünüm penceresine (tüm sayfanın değil, sayfanın görüntülendiği görünüm) göre konumunu almak istiyorum. Bu JavaScript ile nasıl yapılabilir?

Çok teşekkürler

Mevcut cevaplar artık güncel değil. Yerel getBoundingClientRect()yöntem uzun süredir var ve sorunun tam olarak ne istediğini yapıyor. Ayrıca tüm tarayıcılarda desteklenir (IE 5 dahil, öyle görünüyor!)

Gönderen MDN sayfa :

Döndürülen değer, kenarlık kutusunu tanımlayan salt okunur sol, üst, sağ ve alt özellikleri piksel olarak, sol üst görünümün sol üst köşesine göre piksel olarak içeren bir TextRectangle nesnesidir .

Şöyle kullanırsınız:

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

Benim durumumda, kaydırma konusunda güvende olmak için, window.scroll öğesini denkleme ekledim:

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

Bu, kaydırılmış olsa bile, öğenin belge üzerindeki gerçek göreli konumunu almamı sağlar.

Düzenle: Sayfa kaydırmayı hesaba katan bir kod ekleyin.

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

İd argümanı, ofsetini istediğiniz öğenin kimliğidir. Quirksmode yayınından uyarlandı .

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

Deneyebilirsin:

node.offsetTop - window.scrollY

Opera'da tanımlanan viewport meta etiketi ile çalışır.

jQuery bunu oldukça zarif bir şekilde uygular. JQuery'nin kaynağına bakarsanız, bunun offsettemel olarak nasıl uygulandığını göreceksiniz:

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

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

Bu sayfadaki işlev , tarayıcı görünüm bağlantı noktasına göre geçirilen bir öğenin üst, sol, yükseklik ve genişlik koordinatlarına sahip bir dikdörtgen döndürür.

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

kaynak

Tüm cevaplar için teşekkürler. Prototip'in zaten bunu yapan bir işlevi var gibi görünüyor (page () işlevi). Fonksiyonun kaynak kodunu görüntüleyerek, önce sayfaya göre eleman ofset pozisyonunu hesapladığını (yani belgenin üstü), sonra scrollTop'u bundan çıkardığını gördüm. Daha fazla ayrıntı için prototipin kaynak koduna bakın.

btn1Web sayfasında kimliğine sahip bir öğe ve ayrıca jQuery dahil olduğunu varsayalım. Bu, Chrome, FireFox, IE> = 9 ve Edge'in tüm modern tarayıcılarında çalıştı. jQuery yalnızca belgeye göre konumu belirlemek için kullanılır.

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

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

Bazen getBoundingClientRect()nesnenin özellik değeri IE için 0 değerini gösterir. Bu durumda display = 'block'eleman için ayar yapmanız gerekir . Ofset almak için tüm tarayıcı için aşağıdaki kodu kullanabilirsiniz.

JQuery işlevselliğini genişletme:

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

Kullanım:

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