如何监听DOM元素的可见性变化

九旬2023-09-19 16:53

在使用第三方库时，会给我们的页面添加一些DOM，比如播放器插件，会插入一个播放器DOM。

有时需要在DOM元素显示或隐藏后执行一些操作。有时，这些库可能没有提供相应的方法，因此我们需要自己编写一些代码来监听DOM元素的可见性变化。以下是两种常见的方法来实现这个目标。

使用IntersectionObserver

Intersection Observer是一个现代的浏览器API，它允许我们监视元素与视口之间的交叉区域变化。你可以使用它来监听DOM元素的显示和隐藏，如下所示：

javascript 复制代码

const intersectionObserver = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      // 元素进入视口，表示显示
      console.log('DOM元素显示');
      // 在这里可以执行相应的操作
    } else {
      // 元素离开视口，表示隐藏
      console.log('DOM元素隐藏');
      // 在这里可以执行相应的操作
    }
  }
});

const targetElement = document.querySelector('.your-element-class');
intersectionObserver.observe(targetElement);

使用MutationObserver

Mutation Observer是另一个强大的浏览器API，它可以用于监视DOM树的变化。你可以使用Mutation Observer来监听DOM元素的插入和移除，从而实现监听可见性变化，如下所示：

javascript 复制代码

const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      if (mutation.addedNodes.length > 0 && mutation.addedNodes[0].classList.contains('your-element-class')) {
        // 元素被插入到DOM中，表示显示
        console.log('DOM元素显示');
        // 在这里可以执行相应的操作
      } else if (mutation.removedNodes.length > 0 && mutation.removedNodes[0].classList.contains('your-element-class')) {
        // 元素从DOM中移除，表示隐藏
        console.log('DOM元素隐藏');
        // 在这里可以执行相应的操作
      }
    }
  }
});

const targetNode = document.body; // 监听整个body，你可以根据实际情况选择合适的目标元素
const config = { childList: true, subtree: true };
observer.observe(targetNode, config);

这两种方法都允许你监听DOM元素的可见性变化并采取相应的操作。你可以根据项目需求选择其中一种方法。