Question

尝试了解intersectionObserver API中的 quirk 。

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

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不依赖于阈值。如果true元素触及或交叉target元素，则为root。因此，如果true，则始终为intersectionRatio > 0。

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

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

此外，它最初总是被调用。

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

intersectionObserver回调称为外部阈值

1 个答案: