互动Observer回调称为外阈值

Question

试图在IntersectionObserver API中理解A Quirk 。

如果观察到的元素部分在屏幕上，但尚未达到选项中定义的阈值，我希望通话回电不发射，但它 dim 。试图了解为什么或如何在页面加载上预防它。

function handleIntersect(entries, observer) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // Should only fire at >= 0.8
      console.log(entry, entry.intersectionRatio);
      entry.target.classList.add('play');
    }
  });
}
function createObserver(element) {
  let observer;
  const options = {
    threshold: [0.8]
  };
  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(element);
}
const waypoints = document.querySelectorAll('.section');
waypoints.forEach(waypoint => {
  createObserver(waypoint); 
});

减少了测试用例：https://codepen.io/withanes/pen/gxzpmk

请注意，即使第二部分不符合0.8阈值（控制台日志），也要在第一部分中使用。第一个倾向是添加intersectionRatio > 0.8检查，但这是重复的工作。另外，比率报告被延迟了，因此可能不准确地不通过此支票。

Answer 1

isIntersecting不取决于阈值。如果target元素触摸或相交root元素，则为true。因此，如果intersectionRatio > 0。

总是true

如果观察到的元素部分在屏幕上，但尚未满足 在选项中定义的阈值，我希望回电不 火，但确实如此。

通常，当更改条件intersectionRatio >= your_threshold时，callback被调用。因此，可以使用任何intersectionRatio值调用。

此外，它总是被称为最初。

还要注意0.8只是您所需的阈值，但是observer.thresholds[0]是实际的。没有细节，它们可能会有所不同，例如在chrome中。