Javascript 多入口的单交叉口观测器

无法完全理解IntersectionObserver
在下面的示例中，一切正常，但我尝试只为多个条目编写一个观察者
我收到了各种错误消息。
请帮忙

let io = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
        if(entry.isIntersecting){navt.classList.remove('navt1');}
        else{navt.classList.add('navt1');}
    })
})

let io2 = new IntersectionObserver((entries)=>{
    entries.forEach(entry=>{
        if(entry.isIntersecting){gotopw.style.display = 'block';}
        else{gotopw.style.display = 'none';}
    })
})

$(document).ready(function(){
    io.observe(document.querySelector('#wrapt'));
    io2.observe(document.querySelector('#apanel'));
});

---

每个相交图元都指相交的图元。因此，要创建一个IntersectionObserver，您只需利用它

这是一个简单的例子来说明这个概念。注意，有两个“框”可以滚动到视图中。当它们滚动到视图中时，背景颜色会单独改变。我使用了一个交集比率，这样你就可以看到变化的发生

modify（）

和

revert（）

函数表示将在两个交叉点阈值之一中执行的操作

元素id的测试是一个技巧，它允许对多个元素使用一个IntersectionObserver

慢慢滚动以查看两个框。

let io=新的IntersectionObserver（（条目）=>{
entries.forEach（entry=>{
如果（entry.isIntersecting和&entry.intersectionRatio>0.5）{
修改（entry.target）；
}否则{
还原（entry.target）；
}
})
}, {
阈值：0.5
})
功能修改（el）{
如果（el.id==“wrapt”）{
el.style.backgroundColor=‘红色’；
}
如果（el.id==“apanel”）{
el.style.backgroundColor='绿色'；
}
}
功能恢复（el）{
如果（el.id==“wrapt”）{
el.style.backgroundColor='首字母'；
}
如果（el.id==“apanel”）{
el.style.backgroundColor='首字母'；
}
}
io.observe（document.querySelector（'wrapt'）；
io.observe（document.querySelector（“#apanel”）
#wrapt{
边框：2件纯黑；
高度：100px；
宽度：100px；
}
#阿帕内尔{
边框：2件纯蓝；
高度：100px；
宽度：100px；
}
.空的{
高度：400px；
宽度：100px；
}

包裹
aPanel