I'm trying to create a lazy loading article list. I've set an Intersecton Observer that checks when the viewport reaches the end of the observed element (the article container) and makes a new api call.
The thing is when I load the new articles in the observed element the height changes but the observation gets triggered only on the initial height.
Should I use a ResizeObserver on top of the 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, I've just set the container below as the target.
const sections = document.querySelectorAll('footer');
also set rootMargin back to 0px