javascript - 我如何使用 Intersection Observers 来判断何时有东西占据了整个视口(viewport)？

Question

当整个元素都在视口(viewport)内时，交集观察者很容易判断。代码大致是这样的:

// 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);

不过，我想不通的是如何翻转它，所以它不太像包含，而更像封面。我想知道我的元素(大于视口(viewport))何时完全覆盖屏幕。

我尝试在上面切换 null 和 thingIWantEntirelyInView 的位置，但这没有用。

我还尝试添加一个位置固定 height: 100vh; width: 100vw 元素添加到页面并检查与之的交集，但交集观察者似乎无法处理没有父子关系的两个元素？也许我写错了代码，但这里有一个例子:

const thingIWantFillingView = document.getElementById("BigScrolly");
const viewPort = document.getElementById("ViewPort");  

// what I tried
const checkInView = new IntersectionObserver((event) => {
  console.log("This never seems to happen never happen");
}, {
  root: thingIWantFillingView,
  threshold: 0.5,
});
// when the viewport is at least half inside BigScrolly
checkInView.observe(viewPort);



// example of the thing I don't want
const checkTouchView = new IntersectionObserver((event) => {
  console.log("It has touched the viewport");
}, {
  root: null,
  threshold: 0,
});
// when BigScrolly has touched the viewport
checkTouchView.observe(thingIWantFillingView);

#ViewPort {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  pointer-events: none;
  border: 2px solid red;
  box-sizing: border-box;
}

#SomePreviousThing {
  height: 100vh;
}

#BigScrolly {
  height: 300vh;
  background: linear-gradient(#FFEEEA, #222);
}

<div id="ViewPort"></div>
<div id="SomePreviousThing">
  Ignore this section, scroll down.
</div>
<div id="BigScrolly"></div>

如何使用 Intersection Observers 判断我的元素之一何时完全覆盖屏幕？

Answer 1

想出了一个解决方案:我在 BigScrolly 中有一个 100vh 高的粘性元素(确保包裹在一个绝对定位的元素中以否定它在流中的位置)。只要我完全滚动到该部分，它就会占据整个 View 。

const coverChecker = document.querySelector(".CoverChecker");


// what I tried
const checkInView = new IntersectionObserver((event) => {
  const coverage = event[0].intersectionRatio;
  if (coverage >= 1) {
    console.log("BigScrolly covers the viewport");
  } else {
    console.log("Coverage", event[0].intersectionRatio);
  }
}, {
  root: null,
  threshold: [0, 0.25, 0.5, 0.75, 1.0],
});
// when the viewport is at least half inside BigScrolly
checkInView.observe(coverChecker);

.Positioner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
}

.CoverChecker {
  position: sticky;
  height: 95vh;
  width: 95vw;
  border: 2px solid red;
  box-sizing: border-box;
  top: 2px; 
}


.OtherSection {
  height: 100vh;
}

#BigScrolly {
  position: relative;
  height: 300vh;
  padding: 20px;
  background: linear-gradient(#FFEEEA, #222);
}

<div class="OtherSection">
  Ignore this section, scroll down.
</div>
<div id="BigScrolly">
  <div class="Positioner">
    <div class="CoverChecker"></div>
  </div>
  This is some text
</div>
<div class="OtherSection">
  Ignore this section, scroll tup.
</div>