Est-il possible d'obtenir la position de div dans la fenêtre du navigateur? Pas dans le document. Dans la fenêtre

Question

Est-ce faisable dans IE7 ou Firefox?

Answer 1

Vous pouvez le faire dans les deux - obtenir la position par rapport au document, puis soustraire la position de défilement.

var e = document.getElementById('xxx'); 
var offset = {x:0,y:0}; 
while (e) 
{ 
    offset.x += e.offsetLeft; 
    offset.y += e.offsetTop; 
    e = e.offsetParent; 
} 

if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) 
{ 
    offset.x -= document.documentElement.scrollLeft; 
    offset.y -= document.documentElement.scrollTop; 
} 
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) 
{ 
    offset.x -= document.body.scrollLeft; 
    offset.y -= document.body.scrollTop; 
} 
else if (window.pageXOffset || window.pageYOffset) 
{ 
    offset.x -= window.pageXOffset; 
    offset.y -= window.pageYOffset; 
} 

alert(offset.x + '\n' + offset.y); 

Answer 2

Essayez the dimensions jQuery plugin. Voir this demo.

$('#myelement.').offset(); 

Answer 3

Vous pouvez soustraire le offsetTop de div de la document.body.scrollTop

Cela semble fonctionner sur IE7 et FF3, mais sur une page très simple. Je n'ai pas vérifié avec DIVs imbriqués.

Answer 4

En utilisant Prototype ce serait:

$('divname').viewportOffset.top 
$('divname').viewportOffset.left 

Answer 5

Dans IE et Firefox 3, vous pouvez utiliser getBoundingClientRect pour cela; pas de cadre nécessaire. Mais, oui, vous devriez utiliser un framework si vous avez besoin de supporter d'autres navigateurs.

Answer 6

[de la réponse Collage je donnai here]

La méthode getBoundingClientRect() native a été autour depuis un certain temps maintenant, et fait exactement ce que la question demande. De plus, il est pris en charge dans tous les navigateurs (y compris IE 5, il semble!)

De this la page MDN:

La valeur retournée est un objet TextRectangle, qui contient en lecture seule à gauche, en haut, à droite et en bas propriétés décrivant la zone de bordure, en pixels, avec le coin supérieur gauche par rapport à la partie supérieure gauche de la fenêtre.

Vous pouvez l'utiliser comme ceci:

var viewportOffset = el.getBoundingClientRect(); 
// these are relative to the viewport, i.e. the window 
var top = viewportOffset.top; 
var left = viewportOffset.left;