Question

我正在尝试使用新的Intersection Observer API，但是我只能触发一次它的事件。我相信我正在正确使用它，就像我几乎逐字使用MDN example一样。

https://jsfiddle.net/bukzor/epuwztn0/106/

function startObserver() {
  // Almost verbatim from MDN docs:
  //   https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  let options = {
    root: document.querySelector('#svg'),
    rootMargin: '0px',
    threshold: 0.50,
  }

  let observer = new IntersectionObserver(onIntersection, options);

  let target = document.querySelector('circle');
  observer.observe(target);
}

function onIntersection(entries, observer) {
  // Simply log all intersectiono entries.
  console.log(observer)
  console.log("intersections:")
  entries.forEach(function(entry) {
    console.log(entry)
    // This code is just a wild guess, but it still won't fire a second time.
    observer.observe(entry.target)
  })
}

当我运行它时，我在控制台中只有一个条目，而从没有得到。它提到的零尺寸矩形和isVisible: false似乎是其他症状，但我无法找到原因。

IntersectionObserver {root: svg#svg, rootMargin: "0px 0px 0px 0px", thresholds: Array(1), delay: 0, trackVisibility: false}
intersections:
IntersectionObserverEntry {time: 550.8100000151899, rootBounds: DOMRectReadOnly, boundingClientRect: DOMRectReadOnly, intersectionRect: DOMRectReadOnly, isIntersecting: false, …}
   time: 550.8100000151899
   rootBounds: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   boundingClientRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   intersectionRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
   isIntersecting: false
   intersectionRatio: 0
   target: circle
   isVisible: false

此外，我相信API本身在我的浏览器上也可以正常工作，因为此演示正常运行（如下）。实际上与我的示例非常相似。

http://szager-chromium.github.io/IntersectionObserver/demo/svg/

我在做什么错了？

观察者仅触发一次

0 个答案: