判断DOM元素是否可见需综合样式、布局、遮挡和视口位置：先检查display/visibility/opacity及祖先状态；再验证offsetWidth/offsetHeight、offsetParent、getClientRects；接着用getBoundingClientRect或IntersectionObserver判断视口可见性；最后通过elementFromPoint和z-index分析遮挡关系。
判断 DOM 元素是否可见，不能只看它在 HTML 中是否存在，而要综合样式、布局、遮挡和视口位置。不同场景需要不同策略，没有“一招鲜”的方案。
基础样式可见性检查
这是最轻量的前置判断，适用于快速排除明显不可见的情况：
-
display: none —— 元素完全脱离文档流，不占空间，
getComputedStyle(el).display === 'none'可捕获 -
visibility: hidden —— 元素仍占位但不可见，
getComputedStyle(el).visibility === 'hidden' - opacity: 0 —— 视觉上透明，但交互仍可能触发，需结合其他逻辑判断是否“算可见”
- 父级链中任一祖先 display: none 或 visibility: hidden —— 子元素自动不可见，需递归向上检查
布局尺寸与渲染状态判断
即使样式正常，元素也可能因尺寸或渲染状态被判定为不可见：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
offsetWidth 和 offsetHeight 都为 0 —— 多数情况表示不可见（但注意：
transform: scale(0)或overflow: hidden父容器可能导致误判） - offsetParent === null —— 表明元素未参与 CSS 布局（如被移出文档、display: none、或祖先被隐藏）
- getClientRects().length === 0 —— 比 offset 判断更可靠，能反映是否真正生成渲染盒（例如被裁剪、伪元素、或空内容块）
是否在当前视口内（滚动可见性）
常用于懒加载、动画触发动效等场景，重点是“用户能否看到”：
立即学习“Java免费学习笔记（深入）”；
-
getBoundingClientRect() —— 获取元素相对于视口的坐标，再与
window.innerHeight / innerWidth比较。支持部分可见判断（如 top < innerHeight 且 bottom > 0） - IntersectionObserver API（推荐） —— 异步、高性能、原生支持阈值（threshold）、根容器（root）、外边距（rootMargin）。适合大量元素监听，避免 scroll 事件性能瓶颈
-
注意滚动容器内元素 —— 若元素在
overflow: auto的局部容器中，需将该容器设为root，而非默认的 viewport
遮挡与层级干扰
元素在视口内、尺寸正常，仍可能被遮盖，此时“视觉可见” ≠ “DOM 可见”：
- document.elementFromPoint(x, y) —— 在元素中心点取顶层元素，对比是否等于目标元素本身。可辅助判断是否被遮挡
- z-index 与 stacking context —— 注意 transform、opacity、filter 等属性会创建新层叠上下文，影响遮挡关系，仅靠 z-index 数值不足以判断
- fixed 定位元素需额外注意 —— 其可视性不受父容器 overflow 影响，但受祖先 transform 层叠限制（尤其 Safari）
