¿Cuál es la forma más sencilla de determinar la posición de un elemento en relación con el documento / cuerpo / ventana del navegador?

En este momento estoy usando .offsetLeft/offsetTop, pero este método solo le da la posición relativa al elemento principal, por lo que necesita determinar cuántos padres para el elemento del cuerpo, para saber la posición en relación con el cuerpo / ventana del navegador / posición del documento.

Este método también es demasiado engorroso.

Puede atravesar el offsetParentnivel superior del DOM.

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

Puede llegar arriba y a la izquierda sin atravesar DOM de esta manera:

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

Puedes usar element.getBoundingClientRect() para recuperar la posición del elemento en relación con la ventana gráfica.

Entonces usa document.documentElement.scrollTop para calcular el desplazamiento de la ventana gráfica.

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

element.getBoundingClientRect().top + document.documentElement.scrollTop

Sugiero usar

element.getBoundingClientRect()

como se propone aquí en lugar del cálculo de compensación manual mediante offsetLeft , offsetTop y offsetParent . como se propone aquí En algunas circunstancias * el recorrido manual produce resultados no válidos. Vea este Plunker: http://plnkr.co/pC8Kgj

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

document-offset( Script de terceros ) es interesante y parece aprovechar los enfoques de las otras respuestas aquí.

Ejemplo:

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

He encontrado que el siguiente método es el más confiable cuando se trata de casos extremos que se disparan offsetTop / offsetLeft.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

Para aquellos que quieran obtener las coordenadas xey de varias posiciones de un elemento, en relación con el documento.

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

Uso

• getCoords(document.querySelector('selector'), 'center')

• getCoords(document.querySelector('selector'), 'bottom right')

• getCoords(document.querySelector('selector'), 'top center')

Si no le importa usar jQuery, entonces puede usar offset()function. Consulte la documentación si desea obtener más información sobre esta función.

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