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

Question

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

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

或者我可以使用任何其他库来执行此操作吗？

我说的是视觉视口(viewport)。 (不是 css 可见性)

Answer 1

这是一个使用新的 IntersectionObserver API 返回 promise 的脚本，用于检查元素在视口(viewport)中是否实际可见:

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