前端 JS 经典：监听元素重叠

最新推荐文章于 2025-05-07 21:02:57 发布

yqcoder

最新推荐文章于 2025-05-07 21:02:57 发布

阅读量591

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端 JS 经典文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/weixin_64684095/article/details/140193226

前端 JS 经典专栏收录该内容

87 篇文章

订阅专栏

场景：上拉触底加载更多，以前我们是监听滚动条距离，来判断是否触底。缺点是触发频繁，就算使用防抖，也会有加载延迟的缺点。现在我们可以通过 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);