Same intersection observer for multiple HTML elements

Modifying Ruslan’s answer a little because in his answer, multiple Intersection Observer objects are being created.

It is possible to observe multiple elements using the same observer by calling .observe() on multiple elements.

let observerOptions = {
    rootMargin: '0px',
    threshold: 0.5
}

var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
          //do something
        }
    });
};

let target=".targetSelector";
document.querySelectorAll(target).forEach((i) => {
    if (i) {
        observer.observe(i);
    }
});

Leave a Comment

Hata!: SQLSTATE[08004] [1040] Too many connections