IntersectionObserver 实现下拉加载

IntersectionObserver 是一个 JavaScript API，它可以异步观察目标元素与其祖先元素或根元素相交的情况。

IntersectionObserver 可以用于监测元素是否进入视口（viewport）并执行相应的操作。其构造函数接受两个参数：回调函数和配置项。回调函数会在目标元素进入或离开视口时被调用，而配置项可以控制IntersectionObserver的行为，如threshold表示目标元素进入视口的比例。

在回调函数中，我们可以通过entry.isIntersecting属性来判断目标元素是否进入视口。如果进入视口，则调用loadMoreData函数加载更多数据，并通过observer.unobserve(entry.target)停止观察目标元素，避免重复加载数据。

最后，我们通过observer.observe(target)开始观察目标元素。当目标元素进入视口时，就会触发回调函数，从而实现下拉加载的功能。

示例代码：

html
<div id="post-list">
  <div class="post">博文 1</div>
  <div class="post">博文 2</div>
  <div class="post">博文 3</div>
  <div class="post">博文 4</div>
  <div class="post">博文 5</div>
  <div class="post">博文 6</div>
  <div class="post">博文 7</div>
  <div class="post">博文 8</div>
  <div class="post">博文 9</div>
  <div class="post">博文 10</div>
  <div class="post">博文 11</div>
  <div class="post">博文 12</div>
  <div class="post">博文 13</div>
  <div class="post">博文 14</div>
  <div class="post">博文 15</div>
  <div class="post">博文 16</div>
  <div class="post">博文 17</div>
  <div class="post">博文 18</div>
  <div class="post">博文 19</div>
  <div class="post">博文 20</div>
</div>

javascript
const postList = document.querySelector('#post-list');
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
};
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadMorePosts();
    }
  });
}, options);
observer.observe(postList.lastElementChild);
function loadMorePosts() {
  // 在这里加载更多博文
}

首先获取了博文列表的容器元素 postList，然后创建了一个 IntersectionObserver 对象 observer，并将其观察目标设置为博文列表中的最后一个元素。这样，当用户滚动到列表底部时，最后一个元素就会进入视口，从而触发 IntersectionObserver 的回调函数，调用 loadMorePosts 函数加载更多博文。

在创建 IntersectionObserver 对象时，还指定了一些选项。

• root 属性指定了 IntersectionObserver 的根元素，默认为浏览器视口；
• rootMargin 属性指定了根元素的边距，可以用来控制触发回调函数的阈值；
• threshold 属性指定了进入视口的比例，取值范围为 0.0 到 1.0。在这个示例中，我们将阈值设置为 1.0，表示当目标元素完全进入视口时，就会触发回调函数。