javascript - 调用外部阈值的 intersectionObserver 回调

Question

试图理解 intersectionObserver API 中的一个怪癖。

如果观察到的元素部分出现在屏幕上但未达到选项中定义的阈值，我希望回调不会触发，但它确实。试图了解为什么或如何在页面加载时阻止它。

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

请注意前 2 个部分是如何动画的，即使第二个部分不符合 0.8 阈值(控制台日志)。第一个倾向是添加一个 intersectionRatio > 0.8 检查，但这是重复的工作。此外，比率报告被延迟，因此可能不够准确，无法通过此检查。

Answer 1

isIntersecting 不依赖于阈值。如果 target 元素接触或与 root 元素相交，则为 true。因此，如果 intersectionRatio > 0，它始终为 true。

If an observed element is partially on screen but has not met the threshold defined in the options I would expect the call back not to fire, but it does.

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

此外，它总是在初始时被调用。

另请注意，0.8 只是您想要的阈值，但 observer.thresholds[0] 是实际阈值。无需详细说明，它们可能会有所不同，例如在 Chrome 中。