针对你提到的复杂场景——需要判断元素在渲染结果中是否真正可见（不管是自身属性、被遮挡还是滚动出父容器等原因），我推荐结合几个原生API实现一个全面的检测函数，比截图对比高效得多，也能避免假阳性问题。

核心思路 #

我们需要从三个维度验证元素的可见性：

• 元素自身是否具备可见的基础条件（比如不被display:none隐藏、有实际尺寸等）
• 元素是否处于视口/父容器的可见范围内（未被滚动出去）
• 元素是否没有被其他元素完全遮挡

实现代码 #

下面是整合了所有检测逻辑的函数：

function isElementVisuallyVisible(element) {
  // 元素不存在直接返回false
  if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;

  // 1. 检查元素自身的计算样式
  const computedStyle = window.getComputedStyle(element);
  // 排除display:none、visibility:hidden、opacity:0的情况
  if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden' || +computedStyle.opacity === 0) {
    return false;
  }
  // 排除尺寸为0的情况（包括内容和边框）
  const rect = element.getBoundingClientRect();
  if (rect.width <= 0 || rect.height <= 0) {
    return false;
  }

  // 2. 检查元素是否与视口有交集
  const viewportRect = {
    top: 0,
    left: 0,
    bottom: window.innerHeight,
    right: window.innerWidth
  };
  // 计算元素与视口的交集区域
  const intersectionTop = Math.max(rect.top, viewportRect.top);
  const intersectionLeft = Math.max(rect.left, viewportRect.left);
  const intersectionBottom = Math.min(rect.bottom, viewportRect.bottom);
  const intersectionRight = Math.min(rect.right, viewportRect.right);
  const isInViewport = intersectionTop < intersectionBottom && intersectionLeft < intersectionRight;
  if (!isInViewport) {
    return false;
  }

  // 3. 检查元素是否被其他元素完全遮挡
  // 取元素的四个角和中心点，检测这些位置的顶层元素是否为当前元素或其子元素
  const checkPoints = [
    { x: rect.left + 1, y: rect.top + 1 }, // 左上角
    { x: rect.right - 1, y: rect.top + 1 }, // 右上角
    { x: rect.left + 1, y: rect.bottom - 1 }, // 左下角
    { x: rect.right - 1, y: rect.bottom - 1 }, // 右下角
    { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } // 中心点
  ];

  for (const point of checkPoints) {
    // 确保坐标在视口范围内
    if (point.x < 0 || point.x > window.innerWidth || point.y < 0 || point.y > window.innerHeight) {
      continue;
    }
    const topElement = document.elementFromPoint(point.x, point.y);
    // 如果该点的顶层元素是当前元素或其子元素，说明至少有部分可见
    if (topElement === element || element.contains(topElement)) {
      return true;
    }
  }

  // 所有检查点都被其他元素覆盖，说明完全不可见
  return false;
}

关键细节说明 #

• 自身样式检查：通过getComputedStyle获取实际生效的样式，避免内联样式和继承样式的干扰。
• 视口交集检测：用同步的矩形交集计算直接判断，比异步的Intersection Observer更即时，适合同步检测场景。
• 遮挡检测：通过检测元素关键位置的顶层元素，确保元素至少有一部分没有被其他元素完全覆盖。选择四个角加中心点的组合，既能覆盖大部分场景，又不会因为检查过多点影响性能。

注意事项 #

• 对于绝对/固定定位的元素，getBoundingClientRect会返回其相对于视口的位置，不受父元素滚动或样式的影响，函数能正确识别。
• 如果元素的透明度是通过父元素继承的，computedStyle.opacity会返回最终的生效值，无需额外检查父元素。
• 对于visibility: hidden的父元素下的子元素，若子元素设置了visibility: visible，函数会正确识别子元素的可见性，符合浏览器渲染规则。

内容的提问来源于stack exchange，提问作者Alexander