threshold必须写成升序数组,如[0.1]而非0.1或"0.1";[0]易致误触发,[0.1]或[0.5]更符合用户焦点;多值会多次回调,需配合unobserve或显式判断避免重复操作。

threshold 必须写成数组,哪怕只设一个值
写 threshold: 0.1 看似简洁,但浏览器会自动转成 [0.1],调试时容易误以为是单值逻辑;而显式写 threshold: [0.1] 能明确表达“这是阈值集合”,避免后续加多级触发时漏改语法。常见错误是传入字符串 "0.1" 或对象,直接导致 observer 不工作。
0 和 0.1 的实际行为差异极大
threshold: [0] 表示元素只要露出 1px 就触发 —— 滚动稍快时,多个元素可能在几毫秒内连续满足条件,造成高亮跳变、动画抢播或视频误启。而 threshold: [0.1] 要求至少 10% 高度进入视口,天然过滤滚动惯性带来的“擦边”干扰,更符合用户真实阅读焦点。
- 目录高亮场景推荐
[0.1]:防止标题刚露头就高亮,等用户真正“看到它”再响应 - 主视频自动播放推荐
[0.5]:确保用户大概率能看清画面再启播 - 预加载资源可用
[0, 0.25]:0% 触发占位图,25% 触发图片下载
多个 threshold 值会多次触发回调,别盲目堆叠
设 threshold: [0, 0.5, 1] 会让同一元素在进入、中段、完全可见三个时刻各执行一次回调。这在渐进式加载里有用,但多数场景(如动画入场、单次曝光埋点)反而增加判断负担和重复操作风险。
- 动画类逻辑务必搭配
observer.unobserve(entry.target),否则[0, 0.5]可能导致 class 被反复添加 - 如果只关心“首次达到某比例”,用
if (entry.intersectionRatio >= 0.5 && entry.isIntersecting)显式判断比依赖多 threshold 更可控 - 阈值数组必须升序排列,
[0.5, 0]会导致部分浏览器忽略后项
threshold 影响的是 intersectionRatio,不是 isIntersecting
isIntersecting 是布尔值,只反映“是否与根有交叉”,而 intersectionRatio 才是具体比例(0~1)。threshold 控制的正是后者达到多少时通知你 —— 这意味着:即使 isIntersecting === true,若当前 intersectionRatio 还没到你设的 threshold,回调也不会触发。
立即学习“前端免费学习笔记(深入)”;
- 调试时直接打印
entry.intersectionRatio,比只看isIntersecting更准 - 配合
rootMargin: '100px'扩展检测区域时,intersectionRatio可能大于 1(超出容器),此时 threshold > 1 无效,最大仍按 1 计算
intersectionRatio 生效,且必须用数组写法。



















