javascript - IntersectionObserver 未观察到回调中的目标不工作？

Question

当用户向下滚动时，我正在尝试向页面添加元素。当最后一个元素完全进入视野时，我希望调用观察者回调，创建一个新元素，观察者设置为观察新元素并且不再观察当前目标。

function observerCallback(entries, observer) {
  entries.forEach((entry) => {
    const newDiv = document.createElement('div')
    observer.observe(newDiv)
    document.body.appendChild(newDiv)
    observer.unobserve(entry.target);
  });
}

然而，这并没有像我预期的那样工作，回调只是不断被调用并产生新的元素。我已经设置了一个codepen来演示这个问题。

为什么会这样？

标签： javascriptintersection-observer

Answer 1

只是调用IntersectionObserver.observe(target)会触发那个回调target。

const observer = new IntersectionObserver(entries => {
  console.log( 'new entry!', entries[0].target );
});
// wait a bit to show that it's really the call to observe() that does trigger the callback
setTimeout(()=> {
  // even if not attached
  const elem = document.createElement('div');
  observer.observe( elem );
}, 2000);

所以unobserve工作正常，只是新观察到的元素本身会触发一个新的回调调用。

不确切知道您要做什么很难告诉您如何修复代码，但这应该可以帮助您找到正确的路线，也许您只是在寻找isIntersecting属性，所以当最后一个元素不在时它会停止再看。

let observer = new IntersectionObserver(observerCallback, { threshold: 1.0 });

function observerCallback(entries, observer) {
  entries.forEach((entry) => {
    if( !entry.isIntersecting ) {
      return;
    }
    const newDiv = document.createElement('div')
    observer.observe(newDiv)    
    document.body.appendChild(newDiv)
    observer.unobserve(entry.target);
  });
}

observer.observe(document.querySelector('div'))

div {
  height: 20px;
  background-color: red;
  margin-bottom: 5px;
}

<div></div>