如何检测DOM节点是否对用户完全真实可见（未被其他元素遮挡）

此处的可见不只是元素处于视口范围内，还要排除被其他opacity=1的元素完全遮挡的情况，以下是两种可落地的实现思路：

思路1：基于elementFromPoint的采样检测（推荐，适用90%以上场景） #

核心原理是利用浏览器原生APIdocument.elementFromPoint(x,y)，它会返回指定视口坐标处最顶层的DOM元素，通过采样目标元素范围内的多个坐标点，即可判断是否存在未被遮挡的区域：

• 第一步：先过滤元素基础不可见状态，如果元素本身display:none、visibility:hidden、opacity<1，直接判定为不可见。
• 第二步：调用getBoundingClientRect()获取目标元素的视口坐标范围，判断元素是否完全处于视口外，是则直接返回不可见。
• 第三步：在元素坐标范围内生成采样点，小元素可直接取四个角+中心点共5个点，大元素可按固定间隔生成网格采样点，平衡精度和性能。
• 第四步：遍历所有采样点调用document.elementFromPoint()，如果任意一个点返回的元素是目标元素本身或它的后代元素，说明该点未被遮挡，判定元素可见。
• 第五步：如果所有采样点返回的顶层元素都不是目标元素相关节点，判定元素被完全遮挡。

简易实现代码 #

function isElementActuallyVisible(el) {
  // 过滤基础不可见属性
  const computedStyle = window.getComputedStyle(el);
  if (
    computedStyle.display === 'none' ||
    computedStyle.visibility === 'hidden' ||
    parseFloat(computedStyle.opacity) < 1
  ) {
    return false;
  }

  const rect = el.getBoundingClientRect();
  // 完全在视口外直接返回不可见
  if (
    rect.right < 0 ||
    rect.left > window.innerWidth ||
    rect.bottom < 0 ||
    rect.top > window.innerHeight
  ) {
    return false;
  }

  // 采样点：四个边角+中心点，可根据元素尺寸增加采样密度
  const samplePoints = [
    { 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 samplePoints) {
    // 跳过超出视口的采样点
    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 === el || el.contains(topElement)) {
      return true;
    }
  }

  // 所有采样点都被遮挡
  return false;
}

该方案优势是实现简单、性能开销可控，可正确识别被普通元素、iframe、图片等不透明元素遮挡的场景；唯一的不足是采样密度不足时可能出现漏判，针对不规则形状、大面积元素增加采样点即可解决。

思路2：基于层叠上下文的全量覆盖检测（高精度，复杂场景适用） #

核心原理是遍历所有页面元素，筛选出层叠顺序高于目标元素、且和目标元素重叠的不透明元素，计算它们的覆盖范围是否完全覆盖目标元素：

• 第一步：同样先过滤目标元素的基础不可见属性，判断是否在视口内。
• 第二步：获取目标元素所属的层叠上下文、z-index值、层叠等级（对应CSS层叠规则里的块级、浮动、定位元素等级）。
• 第三步：遍历页面所有渲染元素，筛选出视口内、与目标元素坐标重叠、opacity=1、基础属性可见的元素。
• 第四步：对比筛选出的元素和目标元素的层叠顺序，保留层叠顺序高于目标元素的节点。
• 第五步：计算所有高层级元素的合并覆盖面积，如果完全覆盖目标元素的坐标范围，判定为被完全遮挡，否则可见。

该方案准确率极高，不存在采样漏判问题，但实现复杂度很高，需要完整兼容浏览器的层叠上下文规则、嵌套层叠上下文的优先级判断，且页面元素较多时遍历性能开销较大，仅适合对精度要求极高的特殊场景使用。

内容的提问来源于stack exchange，提问作者Radosław Andrzejewicz