如何用Intersection Observer捕获滚动时所有懒加载元素？问题排查

页面初始加载仅渲染6个带name="item-id"的div，向下滚动会懒加载另外6个，但Intersection Observer无法捕获这些后续加载的元素。已尝试在body完全加载后初始化Observer，相关JS代码如下：

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);
})

现象：

• 初始加载时能捕获前6个元素的交互
• 滚动加载新元素后，Observer完全无法检测到这些新元素

问题原因 #

你当前的代码是页面初始化时一次性获取所有name="item-id"的元素，并将它们加入Observer的观察列表。但懒加载的元素是在滚动后才动态创建并插入DOM的，这些新元素不在初始的targets数组里，自然不会被Observer监听。

解决方案 #

方案1：用MutationObserver监听DOM变化，自动添加新元素 #

通过MutationObserver监听懒加载元素的父容器，当有新的目标元素被插入时，自动调用observer.observe()添加监听：

const options = { };

let clickedId_test;

// 初始化Intersection Observer
const observer = new IntersectionObserver(function(entries, observer){
    entries.forEach(entry => {
        if (!entry.isIntersecting) {
            return;
        }
        clickedId_test = entry.target
        console.log(clickedId_test)
    });
}, options);

// 先监听初始已存在的元素
[...document.getElementsByName('item-id')].forEach(el => observer.observe(el));

// 替换成你实际的懒加载元素父容器选择器，比如.lazy-list
const lazyContainer = document.querySelector('.lazy-container');

// 初始化DOM变化监听
const domObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            // 检查当前节点是否是目标元素
            if (node.nodeType === Node.ELEMENT_NODE) {
                if (node.getAttribute('name') === 'item-id') {
                    observer.observe(node);
                }
                // 递归查找子元素中的目标元素
                const newTargets = node.querySelectorAll('[name="item-id"]');
                newTargets.forEach(el => observer.observe(el));
            }
        });
    });
});

// 配置监听规则：监听子节点新增和子树变化
domObserver.observe(lazyContainer, {
    childList: true,
    subtree: true
});

方案2：在懒加载回调中手动添加新元素 #

如果你的懒加载逻辑有完成回调（比如接口请求成功后插入DOM的回调），可以在回调里主动获取新元素并添加监听：

// 初始化Observer和初始元素监听
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);
[...document.getElementsByName('item-id')].forEach(el => observer.observe(el));

// 假设你的懒加载函数是这样的，加载完成后执行传入的回调
function loadMoreItems() {
    fetch('/api/get-more-items')
        .then(res => res.json())
        .then(data => {
            const container = document.querySelector('.lazy-container');
            // 插入新元素到DOM
            data.forEach(item => {
                const div = document.createElement('div');
                div.setAttribute('name', 'item-id');
                div.textContent = item.content;
                container.appendChild(div);
            });
            // 手动添加新元素到Observer
            const newTargets = container.querySelectorAll('[name="item-id"]:not([data-observed])');
            newTargets.forEach(el => {
                observer.observe(el);
                el.setAttribute('data-observed', 'true'); // 标记已监听，避免重复
            });
        });
}

// 滚动触发懒加载的逻辑
window.addEventListener('scroll', () => {
    const isNearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
    if (isNearBottom) {
        loadMoreItems();
    }
});

关键提示 #

Intersection Observer只会监听初始化时传入observe()方法的元素，对后续动态新增的元素不会自动监听，必须通过DOM变化监听或懒加载回调的方式，主动将新元素加入监听列表。

内容的提问来源于stack exchange，提问作者firaki12345