时间戳

首页 > 解决方案 > 如何检测元素可见性（z-index、固定、不透明度等）（Intersection Observer V2 替代方案）

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

问题描述

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
}));```

标签： javascriptz-indexvisibilityintersection-observer

解决方案

另一种方法是轮询您希望使用 setInterval 延迟方法检测可见性的点，该DocumentOrShadowRoot.elementFromPoint延迟类似于您将用作 Intersection Observer v2 的延迟。

这是此时两者之间的 caniuse 链接，其中elementFromPoint支持 99%+ 的用户，而Intersection Observer v2仅支持 69%+。

推荐阅读