¿Obtener la posición/desplazamiento del elemento en relación con un contenedor principal?

¿Cómo puedo recuperar el desplazamiento de un contenedor con respecto a un padre con JS puro?

Jul 24 '12 22:07 matt

en js puro solo uso offsetLefty offsetToppropiedades.
Violín de ejemplo: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

Jul 24 '2012 16:07 Fabrizio Calderan

Lo hice así en Internet Explorer.

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };

    // relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;

    // now we will calculate according to the current document, this current
    // document might be same as the document of target field or it may be
    // parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

=================== puedes llamarlo así

getWindowRelativeOffset(top, inputElement);

Me concentro en IE solo según mi enfoque, pero se pueden hacer cosas similares con otros navegadores.

Oct 08 '2013 08:10 Imran Ansari

Agregue el desplazamiento del evento al desplazamiento del elemento principal para obtener la posición de desplazamiento absoluta del evento.

Un ejemplo :

HTMLElement.addEventListener('mousedown',function(e){

    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    if( e.target != this ){ // 'this' is our HTMLElement

        offsetX = e.target.offsetLeft + e.offsetX;
        offsetY = e.target.offsetTop + e.offsetY;

    }
}

Cuando el objetivo del evento no es el elemento en el que se registró el evento, agrega el desplazamiento del padre al desplazamiento del evento actual para calcular el valor de desplazamiento "absoluto".

Según Mozilla Web API: "La propiedad de solo lectura HTMLElement.offsetLeft devuelve el número de píxeles que la esquina superior izquierda del elemento actual está desplazada hacia la izquierda dentro del nodo HTMLElement.offsetParent " .

Esto sucede principalmente cuando registró un evento en un padre que contiene varios hijos más, por ejemplo: un botón con un ícono interno o intervalo de texto, un lielemento con intervalos internos. etc...

Jan 18 '2017 20:01