Я пытаюсь использовать новый 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/
Что я делаю не так?