Mostrar capa teniendo en cuenta el scroll
Autor: S3rGy0 | Archivado en: ASP, HTML, JavaScript el día 20/Jun/2005
El otro día estaba tratando de mostrar una capa al pasar el puntero del ratón sobre una imagen, de manera que la capa apareciera justo debajo del puntero del ratón. Al principio sólo tuve que mostrarla cuando se lanzará el evento onmouseover, pero a medida que iba añadiendo controles a la página ésta se iba haciendo más grande hasta que apareció el maldito scroll. Lo que ocurrió entonces es que la capa no me salía justo debajo del puntero del ratón sino que se desplazaba arriba o abajo. Después de un rato mirando el código me di cuenta que el desplazamiento que se producía era equivalente al desplazamiento que tenía la barra de scroll, por lo tanto, para solucionarlo tuve que sumarle a la posición actual del ratón, el desplazamiento de la barra de scroll:
document.getElementById(”divObservaciones”).style.left=event.clientX + document.body.scrollLeft;
document.getElementById(”divObservaciones”).style.top=event.clientY + document.body.scrollTop;
Esto se debe a que event.clientX y su homólogo en el eje Y toman una posición relativa a la pantalla, mientras que las propiedades left y top toman medidas absolutas, por lo que se produce un desfase. Si a la posición del puntero del ratón le sumamos los desplazamientos, tanto horizontal como vertical del scroll, obtendremos las posiciones absolutas que demandan las propiedades left y top.
Con esto la capa siempre se muestra donde yo quiero, aunque haya un scroll de por medio.
S3rGy0.
Pasaba por acá a dejar saludos!!
Muchas gracias por tu comentario :)
Un saludo.
Sería interesante una librería js para control de capas, scroll y tal.
El texto con fondo negro no se lee muy bien, cuesta, cuesta…
Mola blog.
Sólo quería darte las gracias. Me ha venido bien este apunte.
Saludos.