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

Check if an element is visible on screen

本文关键字：屏幕 元素 是否 检查      更新时间：2023-09-26

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

但是，是否可以有某种类型的回调，以便在各个元素可见时激发回调，而不是每次都有setTimeOut并检查每个帖子的可见性？

或者我还有其他图书馆可以用来做这件事吗？

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

下面是一个脚本，它使用新的IntersectionObserver API返回一个promise，用于检查元素在视口中是否可见：

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

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

  1. 正在收听窗口滚动事件
  2. 使用交叉点观察员API观察元素的可见性

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

新方法是使用交叉点观察员API交叉点观察者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表示元素在屏幕中完全可见。

我最近开发了一个名为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>

相关文章：