我如何使用交集观察者来判断何时占用整个视口

Question

当视口内的整个元素中的整个元素时，用相交观察者很容易分辨。代码大致喜欢：

// 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和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>

我如何使用交叉点观察者何时完全覆盖屏幕？

Answer 1

提出了一个解决方案：我在bigscrolly内部有一个粘性元素，该元素是100vh高的(请确保包裹在绝对位置的元素中，以消除其在流中的位置(。只要我完全滚动到该部分，它将占据整个视图。

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>

Answer 2

您可以通过简单地检查 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')
  })
})

这是一个完整的示例 - 我用它来倒浮页面标头，而页面的黑暗部分在标题下方：https：//jsfiddle.net/okvtm7gc/