检测元素是否在屏幕中的两种方式

1. 使用 Element.getBoundingClientRect() 方法

这个方法返回一个 DOMRect 对象，其中包含了一个元素的大小和位置信息，包括 left、top、right、bottom 等属性。我们可以使用这些属性判断元素是否在屏幕中。

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

2. 使用 IntersectionObserver API

这是一个比较新的 API，可以监听元素与视口的交叉状态，包括进入视口、离开视口、部分进入视口等。使用这个 API 可以更加精确地判断元素是否在屏幕中。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
    } else {
      console.log('元素离开视口');
    }
  });
});

observer.observe(el);

⚠️ 其中 el 是需要监听的元素。

无论哪种方法，都需要注意浏览器兼容性的问题。