Estoy tratando de usar un IntersectionObserver en mi aplicación Angular pero no funciona como se esperaba. No tengo un ejemplo reproducible ya que esto afecta una implementación productiva, tal vez este caso simple podría ser suficiente. Así que tengo una vista que genera ciertos elementos a través de la directiva *ngFor:
aplicación.componente.html
<div *ngFor="let row of dataSource$ | async" #rows>aplicación.componente.ts
@ViewChildren('rows') rows: QueryList<ElementRef<HTMLElement>>; private observer: IntersectionObserver; ngAfterViewInit(): void { this.observer = new IntersectionObserver(entries => { console.log(entries); if (entries[0].isIntersecting) { console.log('BottomElement is intersecting'); } if (entries[1].isIntersecting) { console.log('TopElement is intersecting'); } } this.rows.changes.subscribe(elements => { this.observer.observe(elements.last.nativeElement); this.observer.observe(elements.first.nativeElement); }); }Así que básicamente estoy agregando el primero y el último generado al IntersectionObserver. Si inicio mi aplicación, todo funciona bien y obtengo los siguientes resultados de la consola:
(2) [IntersectionObserverEntry, IntersectionObserverEntry] TopElement is intersectingPero una vez que empiezo a desplazarme hacia abajo, tan pronto como desaparece TopElement, aparece IntersectionObservable:
[IntersectionObserverEntry] BottomElement is intersecting ERROR TypeError: Cannot read properties of undefined (reading 'isIntersecting')Por lo que IntersectionObservable pierde el TopElement a observar. Por extraño que parezca, el elemento inferior no tiene ningún problema, por lo que se sigue observando el desplazamiento hacia arriba y hacia abajo del elemento inferior.
¿Alguna idea de por qué podría ser el problema?
Siempre espera tener 2 entradas que se cruzan. ¿Qué sucede cuando el elemento superior sale del área de la ventana gráfica y el elemento inferior acaba de comenzar a cruzarse? Supongo que solo tendrías un elemento en la pantalla. Por lo tanto, no puede acceder a elementos en entries[] que no están allí para acceder.
La API de Intersection Observer le permite configurar una devolución de llamada que se llama cuando ocurre alguna de estas circunstancias: Un elemento de destino se cruza con la ventana gráfica del dispositivo o con un elemento específico. Ese elemento especificado se denomina elemento raíz o raíz a los efectos de la API Intersection Observer. La primera vez que se le pide inicialmente al observador que mire un elemento objetivo. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_concepts_and_usage
Pero, ¿y si solo lees lo que obtienes? Es decir, la parte superior se cruza, la parte superior se va, la parte inferior se cruza, la parte inferior se va. ¿Qué tal una directiva para ayudarte?
private _callback = (entries, observer) => { entries.forEach(entry => { console.log(entry.isIntersecting ? this.elementName + 'I am visible' : this.elementName + 'I am not visible'); this.visibilityChange.emit(entry.isIntersecting ? 'VISIBLE' : 'HIDDEN') }); }; <div enterTheViewportNotifier elementName="TOP ELEMENT" style="height: 100px; background-color: yellow"> I'll notify when I'm visible TOP ELEMENT </div> <div enterTheViewportNotifier elementName="BOTTOM ELEMENT" style="height: 100px; background-color: blue"> I'll notify when I'm visible BOTTOM ELEMENT </div>Aquí hay un ejemplo práctico: https://stackblitz.com/edit/angular-ivy-3mkabk?file=src%2Fapp%2Fenter-the-view-port.directive.ts