Una cuestión que puede resultar muy útil en una página o aplicación web es la posibilidad de detectar cuándo aparece o desaparece de la pantalla un elemento determinado debido a las acciones del usuario.

Aparecer-Desaparecer

Por ejemplo, si desaparece una pieza de información importante porque el usuario hace scroll moviendo los contenidos,  podemos sacar una nota resumen, recordatorio o acceso directo para ir verla de nuevo, y ocultarlo otra vez cuando vuelva a aparecer. Cosas por el estilo.

Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.

El problema es que no existe ningún evento como este en HTML/JavaScript.

No nos queda más remedio que buscarnos la vida para poder disponer de una funcionalidad similar a esta.

Así que he creado visibilityEvents.js, una biblioteca escrita en JavaScript puro (ES5) que añade eventos a cualquier elemento de la página para poder detectar estas cuestiones.

Esta biblioteca añade cuatro nuevos eventos a la página:

  • show: que se lanza cuando un elemento aparece por completo (no solo una parte) en el viewport de la página. Si el elemento está ya completamente visible inicialmente no se nostifica el evento. Solo se notifica cuando cambia el estado de visibilidad, es decir, no está visible por completo y pasa a estarlo.
  • hide: se lanza cuando el elemento pasa a estar completamente fuera del área visible.
  • showpart: se lanza cuando el elemento estaba oculto por completo y cualquier parte del mismo entra en el área visible.
  • hidepart: se lanza cuando el elemento estaba completamente visible y cualquier parte del mismo sale de la zona visible.

Los eventos añaden una propiedad visible al objeto estándar details del objeto event, de modo que puedas usar el mismo manejador para gestionar varios de ellos (por ejemplo, el mismo para show y hidepart).

Uso

Puedes descargar el archivo visibilityEvents.js desde Github o instalarlo como dependencia de tu proyecto con npm:

npm i visibilityEvents.js

En cualquier caso lo único que tienes que hacer es colocar una referencia a la biblioteca en la cabecera de tu página, así:

<script src="visibilityEvents.min.js"></script>

y ya podrás utilizar los eventos correspondientes, por ejemplo:

var elt = document.getElementById("miElemento");

elt.addEventListener('show', function() {
console.log("El elemento %s, se ha mostrado por completo en la página. Visibilidad: %s", ev.target.id, ev.detail.visible);
});

En este caso el evento se lanzará cuando el elemento miElemento esté total o parcialmente oculto en la página y pase a mostrarse por completo en ésta porque se produce un scroll o un cambio de tamaño de la página.

IMPORTANTE: esta biblioteca NO funciona con Internet Explorer en ninguna de sus versiones, aunque sí con Microsoft Edge y todos los demás navegadores evergreen.

En el repositorio incluyo más detalles sobre el funcionamiento y tienes también un ejemplo sencillo que utiliza los 4 eventos, alguno de ellos dos veces, y también removeEventListener para eliminarlos.

 

¡Espero que te resulte útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA