是否可以使用“相交观察器”检测元素是否离开视口?例如,我在屏幕上有一个元素,当元素的顶部碰到视口的顶部时,我想触发一个回调。来自MDN:
Intersection Observer API使代码可以注册一个回调函数,该回调函数将在他们希望监视进入或退出另一个元素(或视口)的元素或两个元素相交的数量时执行更改要求的数量。 -(https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
因此,如果我执行以下操作,我会以为元素的顶部也到达视口的顶部时会触发回调?
var options = {
root: document.querySelector('#element'),
rootMargin: '0px',
threshold: 0
}
var observer = new IntersectionObserver(callback, options);
但是,仅当元素的顶部滚动并击中视口的底部时才触发,但不能同时触发。想法?
答案 0 :(得分:1)
如果您浏览API文档here,则threshold
选项可以作为数组传递,以定义应在哪个交集级别上触发回调。因此,每次元素可见至少80%以及元素不可见(退出视口)时,传递类似[0, 0.8]
之类的命令都会触发回调。
这样做可能还会有其他并发症。例如如果有多个元素,则每当一个元素可见时,其他元素可能会退出视口,从而触发不必要的回调。在我的情况下,我使用一些附加的if
条件来处理它。我还必须进行一些尝试才能确定threshold
和intersectionRatio
的最合适值。
答案 1 :(得分:0)
如果我正确理解您要执行的操作,则可以将rootMargin
设置为'0px 0px -100%'
。另外,threshold: 0
是默认设置,因此您无需在选项对象中包含它。