intersectionObserver срабатывает только один раз - PullRequest
1 голос
/ 06 января 2020

Я пытаюсь использовать новый API Intersection Observer, но могу запустить его только один раз. Я полагаю, что я использую это правильно, поскольку я использую пример MDN почти дословно.

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/

Что я делаю не так?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...