Encontrar la posición de cliente compensada de un elemento.

Question

¿Cómo encontrar la posición de cliente de desplazamiento de un elemento utilizando Javascript? (Supongo que el mismo código se puede escribir en un BHO o Gecko / NPAPI).

El problema al que me estoy enfrentando es una forma de averiguar la posición del cliente de compensación del elemento. El e.srcElement.offsetX / Y no da el valor correcto siempre (lo mismo ocurre con clientX / Y). En algunos casos también debemos considerar el elemento de desplazamiento padre.

¿Cómo hacemos esto en general? ¿Hay una manera fácil para esto?

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

Pase el id del elemento a las funciones.

Answer 2

Vea el código a continuación:

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

Para incluir el desplazamiento, eche un vistazo a este detector de eventos de jQuery para registrar el tope de desplazamiento y el desplazamiento.

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

});

Para obtener el desplazamiento solo,

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

Answer 4

Versión de CoffeeScript de Respuesta de Orhun Alp Oral :

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