场景:上拉触底加载更多,以前我们是监听滚动条距离,来判断是否触底。缺点是触发频繁,就算使用防抖,也会有加载延迟的缺点。现在我们可以通过 IntersectionObserver 构造函数,去监听元素和其他元素是否重叠,来实现上拉触底加载更多功能。
实现原理:我们通过监听加载更多 icon 与视口是否重叠来实现效果。
用法:new IntersectionObserver(callback, { root: dom | null, threshold: 0 ~ 1 }),callback 是回调函数,当发生相交时触发。root 表示相交的元素,为 null 时代表视口。threshold 表示阙值,为 0 表示边相交,就相交。为 1 表示,完全包裹才算相交。
const ob = new IntersectionObserver(
async (entries) => {
let entry = entries[0];
if (entry.isIntersecting) {
if (isLoading) {
return;
}
isLoading = true;
await more();
isLoading = false;
}
},
{
root: null,
threshold: 0,
}
);
const dom = document.querySelector(".loading");
ob.observe(dom);