How to get all the observed Elements as we scroll down using the intersection Observer?

Ok, so i am getting Only 6 divs as i load my webpage, and when i scroll down, the other 6 get loaded (Lazy load), but my Observer does not catch it whatsoever, What could be the Problem here ?

I have tried the Intersection Observer and load them at the end when all the body Is loaded.

My JS Code Using Intersection Observer:

var targets = [...document.getElementsByName('item-id')];


const options = { };

let clickedId_test;

const observer = new IntersectionObserver(function(entries,
    observer){
        entries.forEach(entry => {
            if (!entry.isIntersecting) {
                return;
            }
            clickedId_test = entry.target
            console.log(clickedId_test)

        });
    }, options);


targets.forEach(like_button => {
    observer.observe(like_button);
})

My Images

Getting 1st 6 ids

Even after scrolling only get 1st 6 ids

Back to Top