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.

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 de nuevo 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.

En este artículo vamos a desarrollar desde cero la funcionalidad necesaria para conseguir tener un evento como este, listo para utilizar en cualquier página.

La funcionalidad la vamos a dividir en varios pasos individuales que, en conjunto, nos permitirán obtener lo que necesitamos.

SEGUIR LEYENDO para leer el artículo completo y obtener el código.