objetos - obtener la posicion de un elemento javascript

Posición de Div en relación con la parte superior de la ventana gráfica

Question

Me pregunto cómo puedo obtener la cantidad de píxeles (o medición en general) desde un div hasta la parte superior de la ventana en Javascript. No estoy buscando un desplazamiento y en relación con el documento, simplemente en la parte superior de donde se muestra el navegador. Intenté la solución "respondida" aquí: ¿es posible obtener la posición de div dentro de la ventana del navegador? No dentro del documento. Dentro de la ventana , pero al menos en Safari, me estoy encontrando con un problema en el que se devuelve el mismo número sin importar dónde están los div.

¡Gracias por cualquier ayuda!

Answer 1

// Primero obtenga la geometría correcta para el navegador

(function(){
Run= window.Run || {};
if(window.pageYOffset!= undefined){
Run.topLeftScroll= function(hoo){
var wo= [window.pageXOffset, window.pageYOffset]
if(hoo && hoo.nodeType== 1){
hoo= mr(hoo);
var T= 0, L= 0;
while(hoo){
L+= hoo.offsetLeft;
T+= hoo.offsetTop;
hoo= hoo.offsetParent;
}
wo= [L, T, wo[0], wo[1]];
}
return wo;
}
}
else if(document.body.scrollTop!== undefined){
Run.topLeftScroll= function(hoo){
var B= document.body;
var D= document.documentElement;
D= (D.clientHeight)? D: B;
wo= [D.scrollLeft, D.scrollTop];
if(hoo && hoo.nodeType== 1){
hoo= mr(hoo);
var T= 0, L= 0;
while(hoo){
L+= hoo.offsetLeft;
T+= hoo.offsetTop;
hoo= hoo.offsetParent;
}
wo= [L, T, wo[0], wo[1]];
}
return wo;
}
}
})()

// función de acceso directo

if(window.Run && Run.topLeftScroll){
Run.getPosition= function(who, wch){
var A= Run.topLeftScroll(who);
if(!wch) return A;
switch(wch.toUpperCase()){
case ''X'': return A[0];// element Left in document
case ''Y'': return A[1];// element Top in document
case ''L'': return A[0]-A[2];// Left minus scroll
case ''T'': return A[1]-A[3];// Top minus scroll
case ''SL'': return A[2];// scroll Left
case ''ST'': return A[3];// scroll Top
default: return 0;
}
// all returns are integers (pixels)
}
}

Answer 2

Esta answer te dice cómo obtener las coordenadas xey de un elemento con respecto al origen (arriba a la izquierda) de un documento. Solo necesita agregar el valor .scrollTop a la coord de y para obtener la distancia en píxeles de div a la parte superior de la ventana gráfica.

Answer 3

He esquilado un poco y encontré esto:

 function getOffsetPosition(el_id, side){
element = document.getElementById(el_id);
newNode = document.createElement("div");
newNode.innerHTML = "<div style=/"height: 12px;/"></div>";
element.insertBefore(newNode, element.firstChild);
iVal = 0;
oObj = element;
var sType = "oObj.offset"+side;
while (oObj && oObj.tagName != "html") {
iVal += eval(sType);
oObj = oObj.offsetParent;
}
element.removeChild(newNode);
return iVal;
}

Si eso puede ayudarte ^^

Answer 4

Vea lo que JS Frameworks tiene para ofrecer. En su mayoría, han resuelto todos, o al menos la mayoría, de los problemas y especialidades específicos del navegador.

En Prototype, están las funciones scrollOffset() . No estoy lo suficientemente familiarizado con JQuery para indicarle la página de manual correcta, pero esta es una pregunta que parece ir en la dirección correcta.

Answer 5

Las respuestas existentes ahora están desactualizadas. El método getBoundingClientRect() ha existido desde hace bastante tiempo y hace exactamente lo que esta pregunta requiere. Además, es compatible con todos los navegadores.

Desde this 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 relativa a la parte superior izquierda de la ventana gráfica .

Lo usas así:

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