encontrar la posición del elemento relativa al documento

Question

¿Cuál es la forma más fácil de determinar la posición de un elemento en relación con la ventana del documento/cuerpo/navegador? En este momento estoy usando'.offsetLeft/offsetTop ', pero este método solo te da la posición relativa al elemento padre, por lo que debes determinar cuántos padres al elemento del cuerpo, para saber la posición relativa al cuerpo/navegador posición de ventana/documento. Este método también es engorroso.

Answer 1

Puede atravesar el offsetParent hasta el nivel superior del DOM.

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

Answer 2

http://www.quirksmode.org/js/findpos.html Explica la mejor manera de hacerlo, en general, estás en el camino correcto, tienes que encontrar los desplazamientos y recorrer el árbol de los padres.

Answer 3

Se puede utilizar para recuperar la posición element.getBoundingClientRect() elemento con respecto al acceso visual.

Utilice scrollY (document.documentElement.scrollTop compatible con varios navegadores) para calcular la compensación de la ventana gráfica.

La suma de los dos dará la posición del elemento con relación al documento:

subjectRect.top + document.documentElement.scrollTop 

Answer 4

se sugiere emplear

element.getBoundingClientRect() 

como se propone here en lugar de cálculo de desplazamiento manual de a través de offsetLeft, offsetTop y offsetParent. como se propone here En algunas circunstancias * el recorrido manual produce resultados no válidos. Ver este Plunker: http://plnkr.co/pC8Kgj

* Cuando el elemento está dentro de un elemento primario desplazable con posicionamiento estático (= predeterminado).

Answer 5

Puede obtener parte superior izquierda y sin atravesar DOM como esto:

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

Answer 6

Si está utilizando la NGP, document-offset es interesante y parece aprovechar los enfoques de las otras respuestas aquí. El uso es bastante simple:

var offset = require('document-offset') 
var target = document.getElementById('target') 
console.log(offset(target)) 
// => {top: 69, left: 108} 

Answer 7

Si no les importa usar jQuery, a continuación, puede utilizar la función offset(). Consulte documentation si desea obtener más información sobre esta función.

Answer 8

Probado en IE 11, Chrome 62, Firefox 56, Edge 38:

var box = domElement.getBoundingClientRect(); 
var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0); 

Utilice la izquierda/x para offsetLeft.