如何检测HTML元素是否处于顶层且可见？（含下拉菜单场景）

要实现你的需求，我们可以通过JavaScript结合元素布局属性来判断：既检查元素是否处于非隐藏状态，又验证它是否未被完全遮挡（或可通过滚动进入视口）。下面是通用实现方案：

核心思路 #

• 基础可见性检查：排除元素被display: none、visibility: hidden隐藏，或不在文档流中的情况。
• 文档流范围验证：确保元素处于页面可滚动到达的区域，避免完全超出文档的元素被误判。
• 视口与遮挡判断：通过getBoundingClientRect()获取元素位置，判断是否与视口有交集；若当前不在视口但滚动后能到达，也返回true；可选验证元素是否未被其他元素完全覆盖。

实现代码 #

function isElementPartiallyVisible(element) {
  // 1. 基础可见性检查
  const computedStyle = window.getComputedStyle(element);
  if (computedStyle.display === 'none' || computedStyle.visibility !== 'visible') {
    return false;
  }
  if (!element.offsetParent) {
    return false; // 元素不在文档流中
  }

  // 2. 获取元素与视口的位置信息
  const rect = element.getBoundingClientRect();
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

  // 判断元素是否在文档可滚动范围内（滚动后能到达）
  const isInScrollableArea = rect.top <= viewportHeight + rect.height && rect.bottom >= -rect.height &&
                             rect.left <= viewportWidth + rect.width && rect.right >= -rect.width;

  if (!isInScrollableArea) {
    return false;
  }

  // 3. 判断元素是否至少部分在视口内，或未被完全遮挡
  const hasViewportIntersection = rect.top < viewportHeight && rect.bottom > 0 &&
                                  rect.left < viewportWidth && rect.right > 0;

  if (hasViewportIntersection) {
    // 验证元素是否未被其他元素完全遮挡
    const checkPoint = {
      x: Math.max(0, Math.min(rect.right - 1, viewportWidth - 1)),
      y: Math.max(0, Math.min(rect.bottom - 1, viewportHeight - 1))
    };
    const topElement = document.elementFromPoint(checkPoint.x, checkPoint.y);
    return element.contains(topElement);
  } else {
    // 元素在文档流内但当前不在视口，返回true（符合滚动后可见的需求）
    return true;
  }
}

// 使用示例
const targetElement = document.querySelector('.dropdown-content a:last-child');
const dropdown = document.querySelector('.dropdown');

dropdown.addEventListener('mouseenter', () => {
  console.log(isElementPartiallyVisible(targetElement)); // 下拉菜单打开时返回true
});
dropdown.addEventListener('mouseleave', () => {
  console.log(isElementPartiallyVisible(targetElement)); // 下拉菜单关闭时返回false
});

代码说明 #

• 基础检查：先过滤掉被CSS隐藏或脱离文档流的元素，这是判断的前提条件。
• 滚动范围判断：确保元素处于页面可滚动到的区域，避免完全超出文档的无效元素。
• 视口交集验证：若元素当前有部分在视口内，通过document.elementFromPoint()检查该区域是否未被其他元素遮挡。
• 滚动适配：元素在文档流内但当前不在视口时，直接返回true，满足你“滚动后能看到即返回true”的要求。

适配你的示例 #

将上述JavaScript代码添加到你提供的HTML页面中，即可对下拉菜单最后一项（Link 3）进行可见性判断：

• 鼠标移出下拉菜单时，dropdown-content被display: none隐藏，方法返回false。
• 鼠标悬停下拉菜单时，dropdown-content显示，无论Link 3当前是否在视口内，只要处于文档流中就返回true；若被其他元素完全遮挡则返回false。

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