4

试图理解 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检查，但这是重复的工作。此外，比率报告会延迟，因此可能不够准确，无法通过此检查。

4

1 回答 1

2

isIntersecting不依赖于阈值。它是true，如果target元素接触或相交root元素。所以总是trueif intersectionRatio > 0。

如果观察到的元素部分显示在屏幕上但未达到选项中定义的阈值，我希望回调不会触发，但确实如此。

一般在条件改变callback时调用。intersectionRatio >= your_threshold因此可以用任何intersectionRatio值调用它。

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

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

于 2017-09-29T11:25:38.620 回答