Intersection Observer实现跑马灯删除观测元素后二次不触发问题咨询

问题根因 #

逻辑仅触发一次的核心原因是：

• Intersection Observer初始仅观测了页面加载时拿到的第一个子元素，该元素被删除后观测自动失效，新增的第一个子元素没有被加入观测列表，自然不会触发后续回调。
• 原代码中冗余的10万次循环逻辑会导致性能问题，无需循环判断，单次触发时执行一次元素补全+重新观测即可。

实现方案（结合Mutation Observer更适配该场景） #

Mutation Observer可以自动监听marquee容器的子元素变动，当第一个子元素变更时自动注册观测，无需手动每次调用observe，逻辑更稳健，完整实现代码如下：

// 公共变量定义
const marqueeContainer = document.querySelector('.marquee');
const boxWidth = 200; // 请替换为实际的子元素宽度
const rectParent = marqueeContainer; // 若rectParent为其他容器可自行调整

// Intersection Observer配置
const observerOptions = {
  root: null,
  threshold: 0
};

// Intersection Observer回调：处理子元素离开视口的逻辑
const intersectionCallback = (entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio === 0) {
      // 移出已离开视口的第一个子元素
      entry.target.remove();
      console.log('子元素已离开视口');
      
      // 追加新的相同子元素到末尾
      const newChild = document.createElement('p');
      newChild.className = "global-chat";
      newChild.innerHTML = "Something written here";
      rectParent.appendChild(newChild.cloneNode(true));
      
      // 给新的第一个子元素设置偏移
      marqueeContainer.firstElementChild.style.marginLeft = `${boxWidth}px`;
    }
  });
};

// 初始化Intersection Observer
const intersectionObserver = new IntersectionObserver(intersectionCallback, observerOptions);

// Mutation Observer回调：监听子元素变动，自动观测新的第一个子元素
const mutationCallback = (mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList' && marqueeContainer.firstElementChild) {
      // 先清空之前的所有观测（避免观测到已删除的元素）
      intersectionObserver.disconnect();
      // 观测新的第一个子元素
      intersectionObserver.observe(marqueeContainer.firstElementChild);
    }
  }
};

// 初始化Mutation Observer，监听子元素增删变化
const mutationObserver = new MutationObserver(mutationCallback);
mutationObserver.observe(marqueeContainer, { childList: true });

// 初始注册观测第一个子元素
if (marqueeContainer.firstElementChild) {
  intersectionObserver.observe(marqueeContainer.firstElementChild);
}

关键逻辑说明 #

• Intersection Observer只负责观测元素是否离开视口，触发滚动删除逻辑
• Mutation Observer负责监听marquee容器的子元素变化，每次子元素被删除/新增后，自动把新的第一个子元素加入Intersection Observer的观测列表，保证每次都能触发离开回调
• 移除了原代码中冗余的10万次循环，单次触发只做一次元素补全操作，性能更优

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