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

Question

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

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

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

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

Answer 1

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

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

Answer 2

主要有两种方法来检查元素在滚动过程中是否在屏幕上可见/隐藏：

1. 监听窗口滚动事件。
2. 使用 Intersection Observer API 观察元素的可见性。

滚动事件有很多性能问题。

新方法是使用 Intersection Observer API。 Intersection Observer API 可以知道元素何时进入或退出浏览器视口。 这个 API 是异步的

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        console.log('Element is fully visible in screen');
}, { threshold: [1] });

observer.observe(document.querySelector("#element"));

阈值是一个介于 0 和 1 之间的数字，表示目标元素在屏幕中的可视区域。 例如，0 表示没有元素区域可见。 值 0.10 表示大约 10% 的区域在屏幕中可见。 值为 1 表示元素在屏幕中完全可见。

Answer 3

我最近在一个小型库上工作，该库检查元素何时位于名为viewport-action的视口上。 对于像您这样的情况，它可能会很方便。

需要考虑的手感细节：

• 您可以调用一次或每次回调。
• 您可以通过检查何时显示特定高度、宽度或区域来检查显示了多少元素。
• 它等待浏览器中的DOMContentLoaded事件或 Cordova 应用程序中的deviceready ，然后开始检查元素（如果它是 Cordova 应用程序）。
• 它不依赖Promise （还）来支持没有它和旧浏览器的应用程序。

请参阅下面的示例，它根据百分比检查显示了多少元素。

 var options = { once: true }; viewportAction.add('#check', function (e) { var percentageShown = (e.detail.availableArea / (e.detail.width * e.detail.height)) * 100; // Load an image inside the element when the area visible is bigger // than 60% of its area. if (percentageShown > 60) { e.target.innerText = 'Showing ' + percentageShown.toFixed(0) + '% of the element'; // Remove handler if you don't want to use options // e.removeHandler(); } else { e.target.innerText = 'Showing less than 60%'; } // Use options, optionally //}, options); });

 #check { background-color: #F00; color: #FFF; height:500px; width; 100%; }.spacer { background-color: #CCC; height: 300px; }

 <script src="https://cdn.jsdelivr.net/npm/viewport-action@0.2.0/dist/viewportAction.min.js"></script> <div class="spacer">Scroll down or up</div> <div id="check"></div> <div class="spacer"></div>