检查元素是否在屏幕上可见

Question

我正在使用这个插件 - isOnScreen来检查元素是否在视口上可见（检查帖子是否已被查看）。

但是是否有可能有某种回调，而不是有 setTimeOut 并每次检查每个帖子的可见性，而是在相应元素可见时触发回调？

或者我可以使用其他任何图书馆来做到这一点吗？

我说的是视觉视口。（不是 css 可见性）

Answer 1

这是一个使用新IntersectionObserverAPI返回承诺的脚本，用于检查元素是否在视口中实际可见：

function isVisible(domElement) {
  return new Promise(resolve => {
    const o = new IntersectionObserver(([entry]) => {
      resolve(entry.intersectionRatio === 1);
      o.disconnect();
    });
    o.observe(domElement);
  });
}

您可以在代码中使用：

const visible = await isVisible(document.querySelector('#myElement'));
console.log(visible);