Каким образом Intersection Observer может отслеживать динамически подгружаемые элементы?

Рейтинг: 0Ответов: 0Опубликовано: 01.03.2023

Есть скрипт, который подгружает статьи с сервера (scroll + fetch). Появилась задача менять title страницы и его адрес динамически, беря инфу из data атрибутов подгружаемых статей. Т.е. доскролили вниз, статья подгрузилась, данные страницы изменились. Проскролили вверх, до уже загруженной статьи, данные обновились (т.е. предыдущий title вернулся). Решил обновлять title + url с помощью IntersectionObserver:

const changeInfo = (entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
                let title = entry.target.dataset.title;
                let url = entry.target.dataset.url;
                document.title = title;
                window.history.pushState(url, ' ', url);
            }
        });
    }
    const options = {
        threshold: 0.55
    }
    const observer = new IntersectionObserver(changeInfo, options);

    document.querySelectorAll('.селекторСтатьи').forEach((section) => {
        observer.observe(section);
    });

Скрипт нормально работает на странице, где dom не меняется, т.е. все элементы присутствуют изначально. Но как быть, если статьи подгружаемы? Обсервер их не видит. Перенос document.querySelectorAll('.селекторСтатьи').forEach((section) =>{observer.observe(section);}); в последний .then (где у фетча происходит вывод подгруженной статьи) не помогает. Т.е. такое не работает:

фетч...
        .then(function (html) {
            articleShow.insertAdjacentHTML('beforeEnd', html);

            document.querySelectorAll('.селекторСтатьи').forEach((section) => {
                observer.observe(section);
            });            
    
        });

Направьте нуба.

Ответы

Ответов пока нет.