Trouver la position de l'élément par rapport au document

Question

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 par rapport au corps/ fenêtre du navigateur/position du document.

Cette méthode est également trop lourde.

Answer 1

Vous pouvez aller en haut et à gauche sans traverser 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) };
}

Answer 2

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

Utilisez ensuite 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

Answer 3

Vous pouvez traverser le offsetParent jusqu'au niveau supérieur du DOM.

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

Answer 4

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}