Estoy tratando de crear una lista de artículos de carga diferida. Configuré un Intersecton Observer que verifica cuándo la ventana gráfica llega al final del elemento observado (el contenedor del artículo) y realiza una nueva llamada API.
El caso es que cuando cargo los nuevos artículos en el elemento observado, la altura cambia, pero la observación se activa solo en la altura inicial.
¿Debo usar un ResizeObserver encima de IntersectonObserver?
const sections = document.querySelectorAll('.articles_container'); function observeArticlesContainer() { const changeNav = (entries, observer) => { entries.forEach((entry) => { // verify the element is intersecting if (entry.isIntersecting) { console.log(entry.target) // $(results_wrapper).hide() // $(loading_animation).fadeIn(200); fetchData(); } }); } // init the observer const options = { root: null, rootMargin: '0px 0px -100% 0px', threshold: 0 } const observer = new IntersectionObserver(changeNav, options); // target the elements to be observed sections.forEach(section => { observer.observe(section); }); }
ok, acabo de configurar el contenedor a continuación como el objetivo.
const sections = document.querySelectorAll('footer');
también establece rootMargin de nuevo a 0px