Javascript 如何使用交点观察者来判断什么东西占据了整个视口？

当一个元素的整体在视口中时，使用交点观察者很容易判断。代码大致如下：

// get an element
const thingIWantEntirelyInView = $("#Thing")[0];  

const checkInView = new IntersectionObserver((event) => {
  console.log("It's in view");
}, {
  root: null, // viewport
  threshold: 1.0,
});
checkInView.observe(thingIWantEntirelyInView);

但我不明白的是，如何翻转它，所以它不像包含，更像封面。我想知道我的元素（大于视口）何时完全覆盖屏幕

我试着在上面的视图中直接切换

null

和

内容的位置，但没有成功

我还尝试添加一个固定的位置
高度：100vh；宽度：100vw
元素添加到页面中，并使用该元素检查交叉点，但交叉点观察者似乎无法处理两个没有父子关系的元素？也许我的代码错了，但下面是一个例子：


const thingIWantFillingView=document.getElementById（“BigScrolly”）；
const viewPort=document.getElementById（“viewPort”）；
//我试过的
const checkInView=新的IntersectionObserver（（事件）=>{
log（“这似乎从未发生过，从未发生过”）；
}, {
root:thingIWantFillingView，
阈值：0.5，
});
//当视口在BigScrolly中至少有一半时
选中查看。观察（视口）；
//我不想要的东西的例子
const checkTouchView=新的IntersectionObserver（（事件）=>{
log（“它已接触到视口”）；
}, {
root:null，
阈值：0，
});
//当BigScrolly接触视口时
检查触摸视图。观察（thingIWantFillingView）
#视口{
位置：固定；
高度：100vh；
宽度：100vw；
顶部：0px；
左：0px；
指针事件：无；
边框：2倍纯红；
框大小：边框框；
}
#以前的事{
高度：100vh；
}
#大卷轴{
高度：300vh；
背景：线性梯度（#ffeea，#222）；
}

忽略此部分，向下滚动。
想出了一个解决方案：我在BigScrolly中有一个高达
100vh
的粘性元素（确保用绝对位置的元素包装，以抵消它在流中的位置）。只要我完全滚动到那个部分，它就会占据整个视图


const coverChecker=document.querySelector（“.coverChecker”）；
//我试过的
const checkInView=新的IntersectionObserver（（事件）=>{
常数覆盖率=事件[0]。相交比率；
如果（覆盖范围>=1）{
log（“大卷轴覆盖视口”）；
}否则{
console.log（“覆盖率”，事件[0].intersectionRatio）；
}
}, {
root:null，
阈值：[0,0.25,0.5,0.75,1.0]，
});
//当视口在BigScrolly中至少有一半时
检查查看。观察（coverChecker）
定位器{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
底部：0px；
指针事件：无；
}
.封面检查{
位置：粘性；
高度：95vh；
宽度：95vw；
边框：2倍纯红；
框大小：边框框；
顶部：2个；
}
.其他部门{
高度：100vh；
}
#大卷轴{
位置：相对位置；
高度：300vh；
填充：20px；
背景：线性梯度（#ffeea，#222）；
}

忽略此部分，向下滚动。
这是一些文本
忽略此部分，滚动tup。
您可以通过简单地检查
intersectionRect.top
是否为零来实现这一点（还可以检查是否存在任何交点）：

下面是一个完整的示例—我使用它来反转浮动页面标题，而页面的一个黑色部分位于标题下：
只是一个想法：放置两个不可见的元素，一个在顶部，一个在底部，观察两个元素上的相交，并在与这些元素中的每个元素相交的元素上设置一个数据属性，然后删除该数据属性，则该元素不再相交。如果在一个元素上同时设置了两个数据属性，那么该元素将与视口的顶部和底部相交。谢谢。我在下面使用粘性标题提出了一个类似的解决方案。
new IntersectionObserver((entries) => {
  entries.forEach( entry => {
    if (entry.intersectionRatio == 0) {
      console.log('not visible at all')
      return
    }
    if (entry.intersectionRect.top == 0) {
      console.log('at the top of the viewport')
      return
    }
    console.log('partially visible — not at the top of the viewport')
  })
})