Trovare la posizione del client offset di un elemento

Question

Come trovare la posizione del client offset di un elemento usando Javascript? (Suppongo che lo stesso codice possa essere scritto in un BHO o Gecko / NPAPI).

Il problema che sto affrontando è un modo per scoprire la posizione del client offset dell'elemento. e.srcElement.offsetX / Y non fornisce sempre il valore corretto (lo stesso vale per clientX / Y). In alcuni casi dobbiamo anche considerare lo scroll dell'elemento genitore.

Come lo facciamo in generale? C'è un modo semplice per questo?

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

Passa l'id elemento alle funzioni.

Answer 2

Vedi il codice qui sotto:

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 3

Per includere lo scorrimento, dai un'occhiata a questo listener di eventi jQuery per registrare scrollTop e offset.

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

});

Per ottenere l'offset da solo,

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

Answer 4

Versione CoffeeScript di Risposta di Orhun Alp Oral :

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