纯 JS 无法完全模拟 IntersectionObserver，但可用 scroll + getBoundingClientRect 实现降级方案：节流监听滚动、计算可见比、支持阈值与 rootMargin、封装类保持接口一致，缺失异步空闲执行、iframe 支持及精确 layout 时机。
直接模拟 IntersectionObserver 的完整行为在纯 JS 中不可行，因为它依赖浏览器底层的渲染管线和布局计算时机，无法被 JavaScript 完全复现。但可以在不支持该 API 的旧环境（如 IE 或极老安卓 WebView）中，用降级方案逼近其核心功能：判断元素是否进入视口、支持阈值、批量响应、避免高频重排。
用 scroll + getBoundingClientRect 实现基础可见性检测
这是最常用且兼容性最好的 fallback 方式，关键在于控制性能开销：
- 必须配合节流（throttle），推荐使用 requestIdleCallback 或 setTimeout + 时间戳节流，避免每帧都计算
- 对每个目标元素调用 element.getBoundingClientRect()，检查
rect.top < window.innerHeight && rect.bottom > 0 - 若需阈值（如 20% 可见才触发），可手动计算：
const visibleRatio = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0) / rect.height - 不要监听全局 scroll，而是绑定到实际滚动容器（如
overflow: auto的父元素），提升准确性
封装一个轻量级类，接近原生 Observer 接口
保持调用方式一致，降低迁移成本：
- 构造函数接受 callback 和 options（支持
root、threshold、rootMargin的简易解析） -
observe(target)把元素加入内部队列，并初始化首次状态 - 内部使用 resize + scroll 双事件监听（因元素可能因窗口缩放或 DOM 变动而改变位置）
- 每次触发时，遍历队列，生成类似
IntersectionObserverEntry的对象，含isIntersecting、intersectionRatio、target等字段
处理 rootMargin 和自定义根容器
原生 rootMargin 是 CSS 风格字符串（如 "50px 0 -20px"），降级实现需手动解析并偏移计算边界：
- 若
root为非 null 元素，用root.getBoundingClientRect()获取其视窗坐标，再与目标元素坐标做相对运算 - 将
rootMargin拆解为上右下左四值，加到 root 的top/left/bottom/right上，形成“虚拟根边界” - 交叉判断逻辑变为：目标元素与该虚拟边界的交集面积 / 目标元素总面积
注意无法模拟的关键点
这些是降级方案必然缺失、也不建议强行模拟的部分：
- 异步空闲执行：原生 Observer 在浏览器空闲时段回调，不阻塞渲染；JS 降级只能靠节流，仍运行在主线程
-
iframe 内元素支持：跨域 iframe 无法读取其内部布局，
getBoundingClientRect会失败或返回无效值 - 精确的 layout 触发时机：原生 API 能捕获 layout 后的瞬间状态；JS 无法得知浏览器何时完成重排，只能轮询或依赖事件
- 自动 disconnect 优化：浏览器会内部回收不可见/销毁元素的观察任务；JS 需手动管理生命周期，否则易内存泄漏
实际项目中，建议优先使用 官方 polyfill（基于上述思路封装），它已覆盖多数边界情况，比手写更稳定。真需要完全自控逻辑时，再按需裁剪。
