IntersectionObserver
IntersectionObserver
它用于观察两个 HTML DOM 元素之间的交集。当 DOM 进入或离开可见的视窗（Visible Viewport）时，在 DOM 中观察一个元素是很有用的。IntersectionObserver 的一些用例。
- 当一个元素在视窗中可见时，延迟加载图像或其他资源
- 识别广告的可见性并计算广告收入
- 实现网站的无限滚动。当用户向下滚动页面时，不必要浏览不同的页面
- 当一个元素在视窗中时，加载和自动播放、视频或动画
基础使用
使用 IntersectionObserver API 主要需要三个步骤：创建观察者、定义要观察的目标对象、定义回调事件。
创建观察者
const options = {
root: document.querySelector(".scrollContainer"),
rootMargin: "0px",
threshold: [0.3, 0.5, 0.8, 1]
};
const observer = new IntersectionObserver(handler, options);
[0.3] 的阈值意味着，当目标元素在根元素指定的元素内可见 30% 时，调用处理函数。上面意味着当元素被 30%、50%、80% 和 100% 可见时，将调用处理程序、回调函数。
定义观察目标
任何目标元素都可以通过调用 .observer(target) 方法来观察。
const target = document.querySelector(“.targetBox”); observer.observe(target);
定义回调事件
这是当一个人注意到某件不寻常的事情发生时的反应。当目标元素与根元素通过阈值相交时，就会触发回调函数。
function handler(entries, observer) {
entries.forEach(entry => {
// 每个entry描述一个观察到的目标元素的交集变化
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target
// entry.time
});
}
window.addEventListener(
"load",
function(event) {
const mainBox = document.querySelector(".mainBox");
/* Creating observer */
const options = {
root: mainBox,
rootMargin: "0px",
threshold: [0.3, 0.5, 0.8, 1]
};
const observer = new IntersectionObserver(handler, options);
/* Defining target object */
const target = document.querySelector(".targetBox");
observer.observe(target);
},
false
);
/* Defining callback handler */
function handler(entries, observer) {
console.log("Observer handler called: ");
entries.forEach(entry => {
const intersectionRatio = entry.intersectionRatio.toFixed(2);
entry.target.innerText = "Interserction ratio: " + intersectionRatio;
if (intersectionRatio > 0.8) {
entry.target.style.background = "green";
} else if (intersectionRatio > 0.5) {
entry.target.style.background = "blue";
} else if (intersectionRatio > 0.2) {
entry.target.style.background = "red";
}
});
}