Por fin luego de tanto batallar hemos hallado el arreglo de esta interrogante que ciertos los lectores de este sitio web tienen. Si tienes algún detalle que compartir no dudes en dejar tu comentario.
Solución:
PD: Sé que hice esta pregunta hace mucho tiempo, pero quiero resumir lo que obtuve al final.
element.offsetLeftTop no funciona realmente de la forma en que pretendía estar en cuestión.
Desde el HTML puede obtener coordenadas, relativas a la esquina superior izquierda del espacio de la página, no a la pantalla del usuario en sí.
Y desde el complemento, por GetWindowRect() función winAPI puede obtener las coordenadas de la esquina superior izquierda de la ventana del navegador, en relación con la pantalla del usuario, y por GetClientRect() puede obtener las coordenadas de la esquina superior izquierda del rectángulo del Cliente.
PERO, no es el mismo punto que la parte superior izquierda de la página, siempre hay algo entre la esquina del espacio de la página y el rect del cliente o el rect de la ventana. Incluye las barras superiores del navegador y otras cosas.
¿Lo que puedes hacer? Parece que no hay una manera fácil de controlar al 100%:
Puede intentar considerar esas barras del navegador y calcular el espacio entre Client rect y el rectángulo de la página, pero esas barras del navegador no son constantes de un usuario a otro, uno puede tener más de ellos, que otro, y tendrás todo tu sistema de coordenadas jodido. Luego, de alguna manera puede registrar la cantidad de barras instaladas y adiciones al navegador, y de acuerdo con eso, calcular la cantidad de espacio que consumirán, pero las barras y las adiciones no son lo mismo, y nuevamente tiene demasiadas variables para considerar. .
Hay una manera un poco más fácil, no puede ir desde arriba, sino desde abajo: obtenga las coordenadas del punto inferior de rect y realice algunos cálculos con HTML element.offset – vincule su sistema de coordenadas al punto inferior izquierdo de la ventana.
No tiene barras de navegador de usuario en la parte inferior y, por lo tanto, puede tener un poco más de confianza en el espacio entre la página y la esquina de la ventana, pero algunos navegadores tienen barras emergentes allí con información de descarga, etc., y aquí tenemos todo jodido nuevamente.
Otra opción es usar la ventana modal, es decir, abrir la página en la ventana modal a través de window.open() desde su JavaScript, puede controlar la cantidad de controles y barras del navegador en esas ventanas, puede deshacerse de todas esas barras de usuario y hacer una ventana clara solo con la barra de direcciones y la página. Ahora tiene mucho más control y casi puede estar seguro de que este espacio entre las esquinas será el mismo para todos sus usuarios… casi.
Hay que mencionar dos cosas:
1) Algunos navegadores (por ejemplo, Google Chrome, según recuerdo) obtuvieron esas adiciones de navegador personalizadas (por ejemplo, Firebug) para que aparecieran como pequeños íconos cerca de la barra de direcciones, y todavía aparecen cerca de la barra de direcciones de la ventana modal.
¿Cuál es la diferencia que puede preguntar? La diferencia es que, por alguna razón, la parte superior de la ventana del navegador se volverá alrededor de 5 píxeles más gruesa, si hay incluso uno de esos íconos. (Nuevamente, puede intentar registrarse, ¿hay alguno de esos? instalado en el navegador del usuario, o no)
Y si, de todos modos, esos 5px no son cruciales para ti, puede ser un camino a seguir… si estás de acuerdo con lo siguiente.
2) Obvio: esa diversión con las ventanas modales puede ser incómoda para el usuario final, porque elimina algunos controles y mecanismos del navegador a los que los usuarios del navegador están acostumbrados.
Sé que no mencionó jQuery, pero puede usar http://api.jquery.com/offset/ como ejemplo. Combina el offsetLeft/top de todos los padres y cuentas para el desplazamiento, brindándole un x,y preciso (en relación con el cuerpo) para los nodos anidados.
Tenga en cuenta que si está manejando eventos, el objeto de evento siempre le dice dónde ocurrió el evento usando http://api.jquery.com/event.pageX/ y http://api.jquery.com/event.pageY/
Una vez más, mencionar jQuery es solo para inspirarte si no quieres usarlo.
Así es como lo hace jQuery
$.fn.offset = function (options)
var elem = this[0],
doc = elem && elem.ownerDocument;
if (!doc)
return null;
if (elem === doc.body)
return jQuery.offset.bodyOffset(elem);
return getOffset(elem, doc, doc.documentElement);
function getOffset(elem, doc, docElem, box)
valoraciones y comentarios
Ten en cuenta mostrar este enunciado si si solucionó tu problema.