找到元素的偏移客戶端位置

Question

如何使用Javascript找到元素的偏移客戶端位置？ （我假設相同的代碼可以寫在BHO或Gecko/NPAPI中）。

我面臨的問題是一種找出元素的偏移客戶端位置的方法。 e.srcElement.offsetX/Y並不總是給出正確的值（clientX/Y也是如此）。在某些情況下，我們還需要考慮父元素滾動。

我們如何做到這一點？有沒有簡單的方法呢？

Answer 1

function getElementTop (Elem) 
{ 
    var elem; 

    if (document.getElementById) 
    { 
     elem = document.getElementById (Elem); 
    } 
    else if (document.all) 
    { 
     elem = document.all[Elem]; 
    }   

    yPos = elem.offsetTop; 
    tempEl = elem.offsetParent; 

    while (tempEl != null) 
    { 
     yPos += tempEl.offsetTop; 
     tempEl = tempEl.offsetParent; 
    } 

    return yPos; 
} 


function getElementLeft (Elem) 
{ 
    var elem; 

    if (document.getElementById) 
    { 
     var elem = document.getElementById (Elem); 
    } 
    else if (document.all) 
    { 
     var elem = document.all[Elem]; 
    }   

    xPos = elem.offsetLeft; 
    tempEl = elem.offsetParent;   

    while (tempEl != null) 
    { 
     xPos += tempEl.offsetLeft; 
     tempEl = tempEl.offsetParent; 
    }   
    return xPos; 
} 

將元素ID傳遞給函數。

Answer 2

要包含滾動，請查看此jQuery事件偵聽器以記錄scrollTop和偏移量。

// Don't put this in the scroll event listener callback, or that will be unnecessarily performance intensive. 
var offset = $("#id").offset().top; 

$(window).bind("scroll", function() { 

console.log(
    $(window).scrollTop() + 
    offset 
); 

}); 

，以獲得單獨的偏移，

("#id").offset().top; 

Answer 3

請參見下面的代碼：

function getOffsetSum(elem) { 
    var top=0, left=0; 
    while(elem) { 
     top = top + parseInt(elem.offsetTop); 
     left = left + parseInt(elem.offsetLeft); 
     elem = elem.offsetParent; 
    } 
    return {top: top, left: left}; 
} 

Answer 4

的CoffeeScript版本的Orhun Alp Oral's answer：

getOffset = (elem)-> 
    top = 0 
    left = 0 
    while elem 
     top += parseInt(elem.offsetTop) 
     left += parseInt(elem.offsetLeft) 
     elem = elem.offsetParent 
    {top, left}