Javascript 管理在多个div上使用IntersectionObserver的问题

因为我想在每个div出现在屏幕上时实现动画，所以我使用IntersectionObserver API来知道它们何时在视口中

我的想法是为每个div创建一个观察者，如下所示

this.box.forEach（name=>{
让isVis=false；
handleEachCategory（名称，isVis）；
})

我对您的代码做了一些修改，如下所示，这将有助于您完成所需的操作。 代码可能存在的问题是，只有当页面完全加载时才会发生一次

window.addEventListener（“加载”，（事件）=>{
[“一”、“二”、“三”]。forEach（名称=>{
扶手类别（名称）；
});
}，假）；
功能手柄类别（类别）{
让target=document.getElementById（类别）；
让观察者；
让伊斯维斯；
createObserver（）；
函数createObserver（）{
让选项={
root:null，
rootMargin:'0px'，
阈值：1.0
}
观察者=新的交叉观察者（handleIntersect，选项）；
观察者，观察（目标）
}
函数handleIntersect（条目、观察者）{
entries.forEach（entry=>{
如果（entry.intersectionRatio==1）
setAsVisible（）；
});
}
函数setAsVisible（）{
isVis=真；
log（${category}是${（！isVis？“：”）}可见`）
}
}

一、二、三{
最小高度：100px；
}
#一个{
背景：红色；
}
#两个{
背景：黄色；
}
#三{
背景：绿色；
}

我对您的代码做了一些修改，如下所示，这将有助于您完成所需的操作。 代码可能存在的问题是，只有当页面完全加载时才会发生一次

window.addEventListener（“加载”，（事件）=>{
[“一”、“二”、“三”]。forEach（名称=>{
扶手类别（名称）；
});
}，假）；
功能手柄类别（类别）{
让target=document.getElementById（类别）；
让观察者；
让伊斯维斯；
createObserver（）；
函数createObserver（）{
让选项={
root:null，
rootMargin:'0px'，
阈值：1.0
}
观察者=新的交叉观察者（handleIntersect，选项）；
观察者，观察（目标）
}
函数handleIntersect（条目、观察者）{
entries.forEach（entry=>{
如果（entry.intersectionRatio==1）
setAsVisible（）；
});
}
函数setAsVisible（）{
isVis=真；
log（${category}是${（！isVis？“：”）}可见`）
}
}

一、二、三{
最小高度：100px；
}
#一个{
背景：红色；
}
#两个{
背景：黄色；
}
#三{
背景：绿色；
}

谢谢！它确实有效！虽然说我很困惑，但你说我的addEventListener只发生过一次，我认为这是事件侦听器的重点，一旦你添加它。。。好。。。侦听，直到您删除或销毁它。是的，它侦听页面何时加载，并且只加载一次，因此在您的情况下，如果页面在调用handleEachCategory之前加载，则createObserver将永远不会被调用。哈哈，好吧，这很有意义，我只觉得87%的愚蠢。再次感谢，祝你今天愉快：）谢谢！它确实有效！虽然说我很困惑，但你说我的addEventListener只发生过一次，我认为这是事件侦听器的重点，一旦你添加它。。。好。。。侦听，直到您删除或销毁它。是的，它侦听页面何时加载，并且只加载一次，因此在您的情况下，如果页面在调用handleEachCategory之前加载，则createObserver将永远不会被调用。哈哈，好吧，这很有意义，我只觉得87%的愚蠢。再次感谢您，祝您愉快：）