Как правильно настроить IntersectionObserver?

Question

[nomta]

Страница разбита на несколько секций. Нужно, чтобы колбек срабатывал только при пересечении секцией верхней границы вьюпорта. Можно ли этого добиться с помощью IntersectionObserver?

Answer 1

[Андрей Федосеев]

if ('IntersectionObserver' in window) {

    let config = {     
        root: document.querySelector('#scrollArea'),   // если не указывать, root это viewport
        rootMargin: '0px',   // '10px 10px 10px 10px' отступы будут включены в зону отслеживания пересечения. Observer вызовет калбэк за 10px до пересечения секции c любой стороны root. 'px' обязательны.
        threshold: [.0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]  // вызывать калбэк при пересечении каждых 10%. [0] для вызова калбэка один раз при первом пересечении
    };
    
    // заводим observer с обработчиком и конфигом
    sectionObserver = new IntersectionObserver(onIntersection, config); 

     // прикручиваем созданный observer на нужные элементы    
    let sections = document.querySelectorAll('section');
    sections.forEach(section => {
        sectionObserver.observe(section);
    });

    // обработчик observer
    function onIntersection (entries, self) {
        if (entry.intersectionRatio > 0.5) {
            // секция пересекла observer's root на 50%
        }
    });
}

Comments

[nomta]

Благодарю!

Answer 2

[Stalker_RED]

"Правильный" способ я не нашел, но можно проверять entry.boundingClientRect.top, при пересечении верхней границы он около нуля, а при пересечении нижней примерно равен высоте вьюпорта.

jsfiddle.net/w5xzLfvk