iOS Safari中Intersection Observer批量处理条目过于激进的问题排查

首先可以明确：这个现象主要是iOS Safari的默认性能优化行为，但你的代码逻辑也会在这种批量回调场景下放大问题，导致出现“跳过”目标的视觉效果，我们来具体分析：

为什么Safari会批量触发回调？ #

Intersection Observer的规范并没有强制要求浏览器必须逐个触发回调。为了提升滚动流畅度，iOS Safari会在滚动过程中暂时延迟Intersection Observer的回调触发，直到滚动动作停止（或接近停止），再把这段时间内所有交叉状态发生变化的元素一次性批量传给回调函数。而桌面浏览器（比如Chrome）会在滚动过程中更频繁地触发回调，所以你会看到每次只处理一个元素的差异。

你的代码逻辑为什么会导致“跳过”？ #

看你当前的回调逻辑：遍历所有entries时，你只会保留最后一个intersectionRatio==1的元素作为active，然后将所有steps的active状态统一切换为仅这个元素生效。当Safari一次性传入6个条目时，前面几个满足条件的元素会被最后一个覆盖，导致它们的active状态刚被设置就被取消，视觉上就像是“跳过”了这些目标。

如何修改来适配这种行为？ #

根据你的需求（让完全可见的step显示为橙色），可以调整逻辑来适配Safari的批量处理：

方案1：保持“单一active”逻辑，优化批量选择 #

如果你希望同一时间只有一个完全可见的step处于active状态，可以在批量条目中筛选出所有符合条件的元素，再根据你的预期选择正确的那个（比如DOM中最后出现的，或根据滚动方向选择）：

window.addEventListener('load',function(){
    let steps=[...document.querySelectorAll('.step')];

    const observerOptions = {
        threshold: [0,1],
        rootMargin: `0px 0px 0px 0px`,
        root: document
    };

    let observer = new IntersectionObserver((entries) => {
        console.log('callback-------------------------')
        console.log('batched entries:',entries.length)
        // 筛选出所有完全可见的条目
        const fullyVisible = entries.filter(entry => entry.intersectionRatio === 1);
        if (!fullyVisible.length) return;
        
        // 选择最后一个完全可见的元素（可根据需求调整为第一个）
        const active = fullyVisible[fullyVisible.length - 1].target;
        
        // 更新所有step的active状态
        steps.forEach(step => step.classList.toggle('active', step === active));
    }, observerOptions);

    for(let step of steps) observer.observe(step);
})

方案2：让每个元素独立响应交叉状态 #

如果你的场景允许多个完全可见的step同时处于active状态（比如滚动时多个元素短暂重叠在视口中），可以直接为每个条目单独处理状态，避免批量覆盖：

window.addEventListener('load',function(){
    let steps=[...document.querySelectorAll('.step')];

    const observerOptions = {
        threshold: [0,1],
        rootMargin: `0px 0px 0px 0px`,
        root: document
    };

    let observer = new IntersectionObserver((entries) => {
        console.log('callback-------------------------')
        console.log('batched entries:',entries.length)
        // 每个元素根据自身交叉状态独立切换active
        entries.forEach(entry => {
            entry.target.classList.toggle('active', entry.intersectionRatio === 1);
        });
    }, observerOptions);

    for(let step of steps) observer.observe(step);
})

额外提示 #

如果你想要更精细的触发时机，可以尝试调整threshold参数（比如设置为[0, 0.5, 1]），或者修改rootMargin来扩大/缩小交叉检测范围，但这无法改变Safari批量回调的核心行为——这是浏览器层面的性能优化，符合规范要求。

备注：内容来源于stack exchange，提问作者Nico