Al aprender la API de IntersectionObserver, me encuentro con un escenario (aparentemente muy básico) que no puedo entender cómo manejar, y nada de lo que he leído hasta ahora lo ha abordado.
No creo que los detalles importen aquí, creo que es algo conceptual que no entiendo, así que lo expresaré en términos genéricos.
El problema: cuando cargo por primera vez mi pantalla de desplazamiento infinito, se obtienen y representan en la pantalla un número x inicial de entradas. Todo está bien. Si mi centinela inferior todavía se cruza con la ventana gráfica después de esto, se realiza una segunda búsqueda y se agregan las nuevas entradas. Sigue bien. Sin embargo, en este punto, si mi centinela todavía se cruza con la ventana gráfica (es decir, no se han agregado suficientes entradas para empujarlo fuera de la pantalla), estoy atascado. No hay barras de desplazamiento, por lo que no puedo desplazarme hacia abajo y no se obtiene nada más. Si cambio el tamaño de la ventana de modo que el centinela desaparezca de la pantalla y luego me desplazo hacia abajo, se obtiene más.
Mi pregunta: Entonces, ¿cómo me aseguro de que en una carga inicial mi pantalla de desplazamiento infinito se "llene" con entradas y el centinela se borre de la pantalla? ¿Hay alguna manera de implementar algún tipo de lógica "while entry.IsIntersecting"?
Así es como estoy inicializando el observador (esto está en ngOnInit() de un componente Angular pero no creo que sea relevante)...
const options = { rootMargin: '0px 0px 0px 0px' }; this.observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.loadMore.emit(entry); } }); }, options); this.observer.observe(this.infiniteScrollSentinal.nativeElement);Gracias