求助：为Element.checkVisibility()编写Polyfill及第三方库兼容方案

一、准确理解函数规范 #

要写出符合预期的Polyfill，必须明确原生Element.checkVisibility()的核心行为：

• 核心作用：判断元素是否在视口内可见，同时考虑CSS属性（如display、visibility、opacity）对可见性的影响
• 可选参数options：
  • checkOpacity：默认true，是否检查元素及所有祖先的opacity是否为0
  • checkVisibilityCSS：默认true，是否检查元素及所有祖先的visibility是否为hidden
• 判定逻辑：元素需同时满足以下条件才返回true：
  1. 自身及所有祖先的display不为none
  2. 若开启checkOpacity，元素及所有祖先的opacity不能为0
  3. 若开启checkVisibilityCSS，元素及所有祖先的visibility不为hidden
  4. 元素至少有一部分处于视口范围内

二、编写符合规范的Polyfill #

以下Polyfill覆盖了原生函数的核心逻辑，可适配大部分场景：

if (!Element.prototype.checkVisibility) {
  Element.prototype.checkVisibility = function(options = {}) {
    const { checkOpacity = true, checkVisibilityCSS = true } = options;

    // 检查自身display是否为none
    const ownStyle = window.getComputedStyle(this);
    if (ownStyle.display === 'none') return false;

    // 遍历祖先检查visibility（若开启）
    if (checkVisibilityCSS) {
      let currentEl = this;
      while (currentEl) {
        const elStyle = window.getComputedStyle(currentEl);
        if (elStyle.visibility === 'hidden') return false;
        currentEl = currentEl.parentElement;
      }
    }

    // 遍历祖先检查opacity（若开启）
    if (checkOpacity) {
      let currentEl = this;
      while (currentEl) {
        const elStyle = window.getComputedStyle(currentEl);
        if (parseFloat(elStyle.opacity) === 0) return false;
        currentEl = currentEl.parentElement;
      }
    }

    // 检查元素是否在视口内
    const rect = this.getBoundingClientRect();
    return (
      rect.top < window.innerHeight &&
      rect.bottom > 0 &&
      rect.left < window.innerWidth &&
      rect.right > 0
    );
  };
}

注：原生函数还会处理clip-path、transform导致的不可见等边缘场景，若你的项目需要覆盖这些情况，可以在Polyfill中补充对应的判断逻辑。

三、无需移除第三方库的兼容方案 #

方案1：提前注入Polyfill #

将上述Polyfill代码放在第三方库的加载脚本之前（比如页面<head>的最上方），确保第三方库执行时Element.checkVisibility()已存在。

方案2：动态检测与注入 #

若无法控制加载顺序，可通过监听页面加载和DOM变化，动态注入Polyfill：

function injectPolyfill() {
  if (!Element.prototype.checkVisibility) {
    // 粘贴上述Polyfill代码
  }
}

// 页面初始加载时注入
window.addEventListener('DOMContentLoaded', injectPolyfill);
// 监听动态脚本/元素加载，确保后续引入的第三方库也能使用
const observer = new MutationObserver(injectPolyfill);
observer.observe(document.documentElement, { childList: true, subtree: true });

方案3：构建工具层面注入 #

如果项目使用Webpack、Vite等构建工具，可在项目入口文件的最顶部导入Polyfill文件，确保所有代码（包括第三方库）执行前Polyfill已生效。

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