checkVisibility()仅检测CSS属性层面的可见性，无法判断视口外、遮挡、overflow裁剪或祖先隐藏等真实可见性；它只检查opacity、visibility和content-visibility三类状态。
checkVisibility() 不能判断元素是否真正可见，它只反映 CSS 层面的“渲染意愿”，不涉及视口位置、遮挡、滚动裁剪或父级 overflow: hidden 等真实可见性因素。
为什么 checkVisibility() 返回 true 却看不到元素？
这个方法只检查三类 CSS 状态：opacity、visibility 和 content-visibility。它完全忽略以下常见场景：
- 元素在视口外（
getBoundingClientRect()的top大于window.innerHeight） - 被更高
z-index的元素覆盖（document.elementFromPoint()返回遮罩层） - 父容器设置了
overflow: hidden且元素超出裁剪区域 - 祖先元素有
display: none或visibility: hidden（checkVisibility()不递归检查祖先）
checkVisibility() 的实际适用边界
它适合快速排除“被 CSS 明确禁用渲染”的情况，比如：
- 动态插入后确认是否因
content-visibility: auto被跳过渲染 - 批量校验组件内部子元素是否被
opacity: 0或visibility: hidden隐藏 - 配合 MutationObserver 做轻量级样式变更响应（但不能替代视觉可见性逻辑）
示例用法：
const el = document.querySelector('#target');
const isVisibleByCSS = el.checkVisibility({
checkOpacity: true,
checkVisibilityCSS: true,
contentVisibilityAuto: true
});
注意：checkOpacity: true 会把 opacity: 0.001 判为不可见，但 opacity: 0.01 就可能被用户感知到——它不是视觉意义上的“可见”，只是 CSS 属性层面的开关。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
真正可见必须叠加几何与层级检测
要回答“用户此刻能否看到这个元素”，至少需组合以下三步：
- 用
getBoundingClientRect()确认元素矩形与视口有交集（rect.top 0等） - 用
getComputedStyle()排除自身及所有祖先的display: none、visibility: hidden、opacity: 0 - 用
document.elementFromPoint(x, y)在元素中心或多个采样点验证：最上层元素是否为该元素或其后代
单独依赖 checkVisibility() 就像只查身份证没验人脸——信息对不上。
兼容性与运行时风险
checkVisibility() 在 Safari 全系不支持，Chrome ≥105 / Firefox ≥106 才可用。服务端渲染（SSR）环境里 el 可能为 null 或未挂载，直接调用会报 TypeError。更隐蔽的问题是：当元素处于 transform: scale(0) 或 clip-path 裁剪状态时，checkVisibility() 仍返回 true，但它实际像素已不可见。
