Intersection Observer 并移除观察到的元素

Question

我在选取框中使用相交观察器，在那里我观察第一个孩子何时离开视口，移除第一个孩子，将新的（相同的）第一个孩子按其元素的宽度向右移动（使用 marginLeft），然后将另一个相同的子元素附加到父 div 的子元素的末尾。

这工作一次，但交集观察者不会第二次触发，即使新的第一个孩子与删除的孩子相同。

我想知道突变观察者在这里是否会更有用，但不知道如何去做！

let firstChild = document.querySelector('.marquee').firstElementChild;
let target = firstChild;

let options = {
    root: null,
    threshold: 0,
  };
 
function onChange(changes) {
     changes.forEach(change => {
        if (change.intersectionRatio === 0) {
            firstChild.remove();
            console.log('Header is outside viewport');

            for ( i = 0; i < 100000; i++ ) {    
                if ( rectParent.childElementCount < 3 ) {
                    let child = document.createElement('p');
                    child.className = "global-chat";
                    child.innerHTML = "Something written here";
        
                    let docFrag2 = document.createDocumentFragment().appendChild(child.cloneNode(true));
                    rectParent.appendChild(docFrag2);
                    document.querySelector('.marquee').firstElementChild.style.marginLeft = `${boxWidth}` * `${i+1}` + "px";
                }
            }        
        }     
    });
}
 
let observer = new IntersectionObserver(onChange, options);

observer.observe(target);```

Answer 1

问题

您定义IntersectionObserver类并在observer实例化它。 此时， firstChild变量获得了正确的元素，但是在下一次更改中，您的firstChild没有获得更新！

解决方案

您可以在onChange函数中更新您的firstChild元素，以确保在更改之前获得正确的元素。

例如：

function onChange(changes) {
     changes.forEach(change => {
        if (change.intersectionRatio === 0) {
            const firstChild = document.querySelector('.marquee').firstElementChild;
            firstChild.remove();

           // rest of the codes ...    
        }     
    });
}