La API Intersection Observer ha cambiado la forma en que detectamos la visibilidad de los elementos en la web. Antes, dependíamos de costosos listeners en el evento scroll que disparaban cálculos de layout constantemente, afectando el rendimiento.
¿Por qué usar Intersection Observer?
Esta API nativa del navegador ofrece beneficios claros:
- Rendimiento: La detección ocurre fuera del hilo principal de JavaScript, liberando recursos.
- Asincronía: No bloquea la renderización mientras calcula intersecciones.
- Simplicidad: Elimina la necesidad de matemáticas complejas para calcular posiciones relativas al viewport.
Implementación en Angular: Directivas
En este experimento, he creado una Directiva de Angular que utiliza esta API para detectar elementos dentro de un contenedor y aplicar scrollIntoView para navegar entre ellos. Es una forma declarativa y reutilizable de encapsular este comportamiento.
Notas sobre la implementación
Aunque el ejemplo es funcional, hay consideraciones importantes:
- ScrollIntoView: Esta API es muy útil, pero en pantallas pequeñas puede comportarse de forma inesperada si el elemento es más grande que el viewport.
- Responsividad: Asegúrate de que el contenedor y los elementos tengan dimensiones controladas para evitar saltos bruscos.
Enlaces al código:
Código en GitHub Ejemplo en Codesandbox