JavaScript 检查是否可见

有时候我们需要在 JavaScript 中检查元素是否可见，以下介绍几种方法来实现这一功能。

方法一：使用 CSS 属性

元素是否可见取决于其 display 和 visibility 两个 CSS 属性，因此我们可以使用这两个属性来检查元素是否可见。

function isVisible(elem) {
  return (
    getComputedStyle(elem).display !== 'none' &&
    getComputedStyle(elem).visibility !== 'hidden'
  );
}

上面的代码中，getComputedStyle 函数将返回元素的计算样式，包括继承和默认值，我们只需要检查 display 和 visibility 是否都不是 none 和 hidden 即可。

方法二：使用 getBoundingClientRect()

另一种检查元素是否可见的方法是使用 getBoundingClientRect 函数，该函数返回元素的位置和大小信息，通过判断元素是否有宽度和高度来判断其是否可见。

function isVisible(elem) {
  const rect = elem.getBoundingClientRect();
  return rect.width > 0 && rect.height > 0;
}

上面的代码中，如果元素有宽度和高度，则认为其可见。

使用 Intersection Observer API

Intersection Observer API 是一种用来观察元素是否进入视窗的 API，使用该 API 可以更精确地判断元素是否可见，如下所示：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // 元素进入视窗
    } else {
      // 元素离开视窗
    }
  });
});

observer.observe(elem);

上面的代码中，IntersectionObserver 构造函数接收一个回调函数，该回调函数会在被观察元素进入或离开视窗时被调用。entry.intersectionRatio 表示元素与视窗的交叉比率，如果该值大于 0，则表示元素可见。

注意：Intersection Observer API 并不是所有浏览器都支持，需要查看浏览器兼容性。

以上是三种检查元素是否可见的方法，可以根据具体情况选择合适的方法来使用。