Javascript 强制IntersectionObserver更新

有没有办法强制更新/运行

IntersectionObserver

实例？默认情况下，当视口发生更改时，将执行回调。但是我正在寻找一种在其他事件发生时执行它的方法，比如元素的变化

例如：

初始化时，一切正常。但是当您更改

#red

元素的位置时，什么也不会发生

//元素
让green=document.querySelector（“#green”）；
设red=document.querySelector（“#red”）；
//观察者回调
let callback=entries=>{
entries.forEach（entry=>{
让isInside=entry.intersectionRatio>=1？“完全”：“不”；
log（“#”+entry.target.id+”是“+isInside+”在容器内”）；
});
};
//起始观察者
let options={root:document.querySelector（'#container'）}；
让observer=新的IntersectionObserver（回调，选项）；
观察者，观察者（绿色）；
观察者，观察者（红色）；
//按钮动作
document.querySelector（'button'）。addEventListener（'click'，（）=>{
red.style.right=red.style.right==“”？“0px”：“”；
});
#容器{
宽度：100px；
高度：100px；
背景：蓝色；
位置：相对位置；
}
#绿色、#红色{
宽度：50px；
高度：50px；
背景：绿色；
位置：绝对位置；
}
#红色的{
背景：红色；
右：-10px；
}
移动#红色



我认为不可能在不调用节点上的unobserve/observe的情况下强制交叉口观察者更新，但您可以通过将所有观察到的节点保存在一个集合中来对其执行此操作：

class IntersectionObserverManager{
建造师（观察员）{
这个._observer=观察者；
这是。_observedNodes=new Set（）；
}
观察（节点）{
此.\u observedNodes.add（节点）；
观察者观察（节点）；
}
不服务（节点）{
此._observedNodes.remove（节点）；
这是不可观测的（节点）；
}
断开连接（）{
这是。_observedNodes.clear（）；
这是。_observer.disconnect（）；
}
刷新（）{
for（让此节点的节点。\u observedNodes）{
这是不可观测的（节点）；
观察者观察（节点）；
}
}
}

编辑：使用
Set
而不是
WeakSet
，因为它们是
iterable
，所以无需检查主体中的每个元素是否都观察到了元素。要小心调用unobseve以避免内存问题。
一种方法是使用MutationObserver。如果发生突变（在本例中为样式更改），则对已更改的元素调用observe/unobserve。这样，您就不必对所有元素都这样做

以下是一个例子：


//观察者回调
let callback=entries=>{
entries.forEach（entry=>{
让isInside=entry.intersectionRatio>=1？“完全”：“不”；
log（“#”+entry.target.id+”是“+isInside+”在容器内”）；
});
};
//起始观察者
让选项={
root:document.querySelector（“#container”）
};
让observer=新的IntersectionObserver（回调，选项）；
const-box=document.queryselectoral（“#container>div”）；
box.forEach（box=>{
观察者。观察（框）；
});
//按钮动作
document.querySelector（'button'）。addEventListener（'click'，（）=>{
red.style.right=red.style.right==“”？“0px”：“”；
});
//突变观察者
const targetNode=document.querySelector（“#container”）；
//观察者的选项（要观察哪些突变）。我们只需要更改样式，就可以将属性设置为true。此外，我们正在观察容器的子元素，因此子树是正确的
常量配置={
属性：正确，
childList:false，
子树：对，
attributeFilter:[“样式”]
};
//观察到突变时执行的回调函数
常量mutationCallback=（mutationsList，mutationObserver）=>{
for（让突变列表突变）{
if（mutation.type==='attributes'）{
log（'修改了'+mutation.attributeName+'属性'）；
观察者。不观察者（突变。目标）；
观察者。观察者（突变。靶点）；
}
}
};
//创建链接到回调函数的观察者实例
const mutationObserver=新的mutationObserver（mutationCallback）；
//开始观察目标节点是否存在已配置的突变
mutationObserver.observe（targetNode，config）
#容器{
宽度：300px；
高度：300px；
背景：浅蓝色；
位置：相对位置；
}
#绿色，
#红色的{
宽度：100px；
高度：100px；
背景：绿色；
位置：绝对位置；
}
#红色的{
背景：紫色；
右：-10px；
}
移动#红色



我可能没有正确回答这个问题，我的理解是您希望触发IntersectionObserver，因此会调用您的回调。你为什么不直接打电话呢

document.querySelector('button').addEventListener('click', () => {
  red.style.right = red.style.right == "" ? "0px" : "";
  callback(red);
});

您只需为交叉口观察员设置
阈值：1.0
。这是一个很难理解的参数。阈值定义观察者应触发回调的交点百分比

默认值为0，这意味着当元素的第一个或最后一个像素与捕获帧的边界相交时，将触发回调。您的元素永远不会完全离开捕获帧。这就是为什么从不调用回调

如果我们将阈值设置为1，我们会告诉观察者在元素100%位于帧内时触发回调。这意味着在这种100%包容性的状态下发生更改时将触发回调。我希望这听起来可以理解：）


//元素
让green=document.querySelector（“#green”）；
设red=document.querySelector（“#red”）；
//观察者回调
let callback=entries=>{
entries.forEach（entry=>{
让isInside=entry.intersectionRatio>=1？“完全”：“不”；
log（“#”+entry.target.id+”是“+isInside+”在容器内”）；
});
};
//起始观察者
让选项=