Quelle est la manière la plus simple de déterminer la position d'un élément par rapport à la fenêtre du document / corps / navigateur?

Pour le moment, j'utilise .offsetLeft/offsetTop, mais cette méthode ne vous donne que la position par rapport à l'élément parent, vous devez donc déterminer le nombre de parents de l'élément body, pour connaître la position relative au corps / fenêtre du navigateur / position du document.

Cette méthode est également trop lourde.

Vous pouvez parcourir le offsetParentniveau supérieur du DOM.

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

Vous pouvez aller en haut et à gauche sans parcourir le DOM comme ceci:

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

Vous pouvez utiliser element.getBoundingClientRect() pour récupérer la position de l'élément par rapport à la fenêtre.

Ensuite, utilisez document.documentElement.scrollTop pour calculer le décalage de la fenêtre.

La somme des deux donnera la position de l'élément par rapport au document:

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

Je suggère d'utiliser

element.getBoundingClientRect()

comme proposé ici au lieu du calcul manuel de l'offset via offsetLeft , offsetTop et offsetParent . comme proposé ici Dans certaines circonstances * le parcours manuel produit des résultats invalides. Voir ce Plunker: http://plnkr.co/pC8Kgj

* Lorsque l'élément est à l'intérieur d'un parent scrollable avec un positionnement statique (= par défaut).

document-offset( Script tiers ) est intéressant et semble tirer parti des approches des autres réponses ici.

Exemple:

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

J'ai trouvé que la méthode suivante était la plus fiable pour traiter les cas de bord qui déclenchent offsetTop / offsetLeft.

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

Pour ceux qui veulent obtenir les coordonnées x et y de différentes positions d'un élément, par rapport au document.

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

Usage

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

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

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

Si cela ne vous dérange pas d'utiliser jQuery, vous pouvez utiliser offset()function. Reportez-vous à la documentation si vous souhaitez en savoir plus sur cette fonction.

http://www.quirksmode.org/js/findpos.html Explique la meilleure façon de le faire, dans l'ensemble, vous êtes sur la bonne voie, vous devez trouver les décalages et parcourir l'arbre des parents.