Qual è il modo più semplice per determinare la posizione di un elemento rispetto al documento / corpo / finestra del browser?

In questo momento sto usando .offsetLeft/offsetTop, ma questo metodo ti dà solo la posizione relativa all'elemento genitore, quindi devi determinare quanti genitori per l'elemento corpo, per conoscere la posizione relativa al corpo / finestra del browser / posizione del documento.

Questo metodo è anche ingombrante.

Puoi attraversare offsetParentfino al livello più alto del DOM.

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

Puoi andare in alto e a sinistra senza attraversare DOM in questo modo:

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

È possibile utilizzare element.getBoundingClientRect()per recuperare la posizione dell'elemento rispetto alla finestra.

Quindi utilizzare document.documentElement.scrollTopper calcolare l'offset del viewport.

La somma dei due darà la posizione dell'elemento rispetto al documento:

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

Suggerisco di usare

element.getBoundingClientRect()

come qui proposto invece del calcolo manuale dell'offset tramite offsetLeft , offsetTop e offsetParent . come qui proposto In alcune circostanze * l'attraversamento manuale produce risultati non validi. Vedi questo Plunker: http://plnkr.co/pC8Kgj

* Quando l'elemento è all'interno di un genitore scorrevole con posizionamento statico (= predefinito).

document-offset( Script di terze parti ) è interessante e sembra sfruttare gli approcci delle altre risposte qui.

Esempio:

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

Ho trovato il seguente metodo il più affidabile quando si tratta di casi limite che fanno scattare offsetTop / offsetLeft.

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

Per coloro che vogliono ottenere le coordinate xey di varie posizioni di un elemento, rispetto al 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')

Se non ti dispiace usare jQuery, puoi usare offset()function. Fare riferimento alla documentazione se si desidera saperne di più su questa funzione.

http://www.quirksmode.org/js/findpos.html Spiega il modo migliore per farlo, tutto sommato, sei sulla strada giusta, devi trovare gli offset e attraversare l'albero dei genitori.