javascript - 如何检测元素可见性(z-index、固定、不透明度等)(Intersection Observer V2 替代方案)

Question

Intersection Observer V2 将引入新功能，以根据不透明度、z-index 和固定定位等因素检测实际可见度。

信息:https://developers.google.com/web/updates/2019/02/intersectionobserver-v2

问题:是否有替代方法或 polyfill 来检测当前浏览器中的实际可见性？

测试:https://jsfiddle.net/v3kgewhf/

// Intersection Observer V2
const observer = new IntersectionObserver((changes) => {
  for (const change of changes) {
    // ⚠️ Feature detection
    if (typeof change.isVisible === 'undefined') {
      // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
      change.isVisible = true;
    }
    if (change.isIntersecting && change.isVisible) {
      visibleSince = change.time;
    } else {
      visibleSince = 0;
    }
  }
}, {
  threshold: [1.0],
  // 🆕 Track the actual visibility of the element
  trackVisibility: true,
  // 🆕 Set a minimum delay between notifications
  delay: 100
}));```

Answer 1

另一种方法是轮询您希望使用 DocumentOrShadowRoot.elementFromPoint 检测可见性的点。具有 setInterval 延迟的方法，类似于您将用作 Intersection Observer v2 的延迟的方法。
这是此时两者之间的caniuse链接elementFromPoint支持 99% 以上的用户 vs Intersection Observer v2仅支持 69%+。