15

有没有办法使用 Intersection Observers 检测元素是否离开视口？例如，我在屏幕上有一个元素，我想在元素顶部到达视口顶部时触发回调。来自 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);

但它似乎只在元素顶部滚动并触及视口底部时才被触发，但不是两者兼而有之。想法？

4

2 回答 2

8

如果您在此处查看API 文档，则threshold可以将选项作为数组传递，以定义应触发回调的交集级别。[0, 0.8]因此，每次元素至少可见 80% 以及元素不可见（退出视口）时，传递类似的东西都会触发回调。

执行此操作时可能会出现其他并发症。例如，如果有多个元素，当一个元素可见时，另一个元素可能会退出视口，从而触发不必要的回调。在我的案例中，我使用了一些附加if条件来处理它。我还必须做一些命中和试验来确定 和 的最合适的threshold值intersectionRatio。

于 2019-03-15T10:00:47.777 回答
8

如果我正确理解您要执行的操作，则可以设置rootMargin为'0px 0px -100%'. 此外，threshold: 0它是默认值，因此您不需要将其包含在您的选项对象中。

于 2019-02-25T20:37:47.133 回答