【JS】监听元素重叠

最新推荐文章于 2024-07-09 18:13:44 发布

田本初

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量413

点赞数 7

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/owo_ovo/article/details/137145294

版权

JavaScript 专栏收录该内容

71 篇文章 1 订阅

订阅专栏

常见场景： 滚动条滚动到底部时加载数据，如果监听滚动事件，会造成不必要的浪费。如频繁滚动但未达底部。可以建立观察者，监听loading标识元素到达视口某位置后再加载数据。

步骤

创建一个新的 IntersectionObserver 对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。

创建观察者：new IntersectionObserver()，接受两个参数
- 参数1：回调函数
  参数entries为观察的所有元素的集合。被观察元素的isIntersecting属性为true时表示已超过重叠阈值。
- 参数2：构造器
  root为与被观察元素重叠的元素，默认为null，表示顶级文档视口。thresholds表示阈值，小数表示百分比，即重叠比例，默认为0。
观察元素：IntersectionObserver.observe()，一个观察者可以观察多个元素，当观察多个元素时，参数1中的entries也为多个。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Loading</title>
  <style>
    .content {
      height: 800px;
      overflow-y: scroll;
      padding: 20px;
      border: 1px solid #333;
    }

    .box {
      width: 100%;
      height: 400px;
      background-color: #bfd;
      margin-bottom: 30px;
    }

    #loading {
      display: block;
      text-align: center;
      padding: 10px;
      background-color: #f1f1f1;
      margin-top: 10px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="box">1</div>
    <div class="box">1</div>
    <div class="box">1</div>
    <div class="box">1</div>
    <div id="loading" class="hidden">Loading...</div>
  </div>
  <script>
    // 建立观察者
    const loading = document.getElementById('loading');
    let ob = new IntersectionObserver(function (entries) {
      let loading = entries[0]
      console.log(loading.isIntersecting);
      if (loading.isIntersecting) {
        console.log('加载更多');
      }
    }, {
      thresholds: 0.5
    })
    ob.observe(loading);

  </script>
</body>

</html>