intersectionObserver回调调用外部阈值

尝试了解intersectionObserver API中的问题。intersectionObserver回调调用外部阈值

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

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支票，但这是重复的工作。此外，比率报告延迟，因此可能不够准确，不能通过此项检查。

来源

2017-09-06 WithAnEs

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

如果观察到的元素是部分在屏幕上，但并没有达到规定的阈值的选项我希望再打不火，但它确实。

一般情况下，callback在条件intersectionRatio >= your_threshold被更改时被调用。因此可以使用任何intersectionRatio值来调用它。

此外，它始终被称为最初。

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

来源

2017-09-29 11:25:38 dizel3d

不，我了解isIntersecting属性。我添加了isIntersecting检查，以防止每个交点观察者实例触发页面加载。我遇到的问题是阻止初始页面加载超出预定义阈值的元素。我可以添加一个可见百分比检查，但考虑到阈值已定义，这似乎很奇怪。 – WithAnEs

更新了答案 – dizel3d

intersectionObserver回调调用外部阈值

回答

相关问题