javascript - Öğenin belgeye göre konumunu bulma

Bir elementin belge/gövde/tarayıcı penceresi ile göreli konumunu belirlemenin en kolay yolu nedir?

Şu anda .offsetLeft/offsetTop kullanıyorum, ama bu yöntem size sadece üst öğeye göre konumu verir, bu yüzden body öğesine göre konumu bilmek için kaç üst öğe olduğunu belirlemeniz gerekir.

Bu yöntem de çok zahmetli.

Cevap #1

DOM üzerinde gezinmeden top ve left değerlerini şöyle alabilirsiniz:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

Cevap #2

element.getBoundingClientRect()'i kullanarak öğenin görünüm alanına göre konumunu alabilirsiniz.

Sonra görünüm alanı ofsetini hesaplamak için document.documentElement.scrollTop kullanın.

İkisininki toplamı, öğenin belgeye göre konumunu verecektir:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Cevap #3

DOM'un en üst seviyesine kadar offsetParent üzerinden geçiş yapabilirsiniz.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

Cevap #4

offsetTop/offsetLeft’i şaşırtan uç durumlarla uğraşırken en güvenilir yöntem olarak aşağıdaki yöntemi buldum.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}