检测视口是否在另一个视口中( Intersection Observer )-CFANZ编程社区

检测视口是否在另一个视口中( Intersection Observer )

Intersection Observer API 允许代码注册一个回调函数，只要他们希望监视的元素进入或退出另一个元素（或视)options传递给构造函数的对象让IntersectionObserver()您可以控制调用观察者回调的情况。它有以下字段：

root用作检查目标可见性的视口的元素。必须是目标的祖先。如果未指定或如果，则默认为浏览器视口null。
rootMargin根周围的边缘。可以具有类似于 CSS margin 属性的值，例如 " 10px 20px 30px 40px"(top, right, bottom, left)。这些值可以是百分比。这组值用于在计算交点之前增大或缩小根元素边界框的每一侧。默认为全为零。
threshold 单个数字或数字数组，指示观察者的回调应在目标可见度的百分比下执行。如果您只想检测能见度何时超过 50% 标记，则可以使用值 0.5。如果您希望每次能见度再超过 25% 时都运行回调，您可以指定数组 [0, 0.25, 0.5, 0.75, 1]。默认值为 0（意味着只要有一个像素可见，回调就会运行）。值为 1.0 表示在每个像素都可见之前，不会认为阈值已通过。

通过调用其构造函数并向其传递一个回调函数来创建交集观察器，以便在一个方向或另一个方向超过阈值时运行：
let options = {
  root: document.querySelector("#scrollArea"),//父级或者祖先
  rootMargin: "0px",
  threshold: 1.0,//默认子元素目标是否露头，为1时候露出全部才触发回调
};
只要目标满足为 指定的阈值`IntersectionObserver`，就会调用回调.
let observer = new IntersectionObserver((entries, observer)=>{
entry.isIntersecting ? 'VISIBLE' : 'HIDDEN'
//回调接收到的条目列表包括每个目标的一个条目，该目标报告了其交集状态的变化。检查属性的值isIntersecting 以查看条目是否表示当前与根相交的元素。
}, options);
```
let target = document.querySelector("#listItem");//被观察的子元素
observer.observe(target);
```

0 条评论