IntersectionObserver: observe() 方法
IntersectionObserver 接口的 observe() 方法用于将一个元素添加到 IntersectionObserver 正在监视的目标元素集合中。一个观察者只有一个阈值集和一个根元素，但可以监视多个目标元素，以符合这些设置的方式来更改其可见性。
要停止观察该元素，请调用 IntersectionObserver.unobserve()。
当指定元素的可见性跨越观察者的某个可见性阈值（如 IntersectionObserver.thresholds 中列出的）时，将使用一个 IntersectionObserverEntry 对象数组执行观察者的回调函数，该数组代表发生的相交变化。请注意，这种设计允许通过一次回调调用来处理多个元素的相交变化。
注意： 即使观察到的元素尚未相对于视口移动，调用 observe() 后的第一个渲染周期，观察者 回调 也会始终触发。这意味着，例如，当在视口外的元素上调用 observe() 时，回调会立即被调用，其中至少有一个 entry 的 isIntersecting 属性被设置为 false。而视口内的元素会导致回调立即被调用，其中至少有一个 entry 的 isIntersecting 属性被设置为 true。
语法
js
observe(targetElement)
参数
targetElement-
需要监视其在根元素内可见性的
element。该元素必须是根元素的后代（或者，如果根是文档的视口，则必须包含在当前文档中）。
返回值
无（undefined）。
示例
js
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
// Add 'active' class if observation target is inside viewport
entry.target.classList.add("active");
} else {
// Remove 'active' class otherwise
entry.target.classList.remove("active");
}
});
});
// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
io.observe(el);
});
规范
| 规范 |
|---|
| 交集观察器 # dom-intersectionobserver-observe |
浏览器兼容性
加载中…