javascript - posicionar - ¿Es posible obtener la posición de div dentro de la ventana del navegador? No dentro del documento. Dentro de la ventana

posicionar div css

Question

¿Es esto factible en IE7 o Firefox?

Answer 1

Pruebe el plugin jQuery de dimensiones . Vea esta demostración .

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

Answer 2

En IE y Firefox 3, puede usar getBoundingClientRect para esto; sin marco necesario.

Pero, sí, debería usar un marco si necesita soportar otros navegadores también.

Answer 3

Puedes restar offsetTop del div del document.body.scrollTop

Esto parece funcionar en IE7 y FF3, pero en una página muy simple. No he verificado con DIV anidados.

Answer 4

Usando Prototype sería:

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

Answer 5

Puede hacerlo en ambos: obtenga la posición relativa al documento, luego reste la posición de desplazamiento.

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 6

[Pegado de la respuesta que di aquí ]

El getBoundingClientRect() nativo getBoundingClientRect() ha existido desde hace bastante tiempo y hace exactamente lo que la pregunta requiere. Además, es compatible con todos los navegadores (¡incluido el IE 5, parece!)

Desde esta página MDN:

El valor devuelto es un objeto TextRectangle, que contiene propiedades de solo lectura a la izquierda, arriba, derecha e inferior que describen el cuadro de borde, en píxeles, con la parte superior izquierda en relación con la parte superior izquierda de la ventana gráfica .

Lo usas así:

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