如何监听元素的显示和消失？IntersectionObserver

要监听元素的显示和消失，可以使用Intersection Observer API。Intersection Observer API 是一个异步的 API，可以用于监听元素与视口的交叉状态。

使用该 API，可以创建一个观察器对象，然后将其与要观察的元素绑定。当观察到元素进入或离开视口时，会触发相应的回调函数。
以下是一个示例代码，用于监听一个元素的显示和消失：

<!-- 要观察的元素 -->
<div id="my-element">观察我！</div>

// 创建观察器对象
const observer = new IntersectionObserver((entries) => {
  // 遍历所有交叉状态的 entry 对象
  entries.forEach(entry => {
    // 如果进入视口，则打印 "进入视口"
    if (entry.isIntersecting) {
      console.log('进入视口');
    } else {
      // 否则打印 "离开视口"
      console.log('离开视口');
    }
  });
});

// 获取要观察的元素
const target = document.querySelector('#my-element');

// 将观察器对象与要观察的元素绑定
observer.observe(target);

在上面的代码中，首先创建了一个IntersectionObserver对象，用于监听元素的交叉状态。然后，使用querySelector方法获取了要观察的元素，并使用observe方法将观察器对象与元素绑定。最后，通过回调函数判断元素是否进入视口，并在控制台中打印相应的消息。
需要注意的是，Intersection Observer API 可以同时观察多个元素，并可以对每个元素指定不同的选项。此外，该 API 还可以监听元素与其他元素的交叉状态，而不仅仅是与视口的交叉状态。