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

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

要考虑的细节：

您可以一次或每次调用回调。
您可以通过检查何时显示特定的高度，宽度或面积来检查显示了多少元素。
在开始检查元素之前（如果它是Cordova应用程序），它将等待浏览器中的DOMContentLoaded事件或Cordova应用程序中的deviceready。
在没有它和较旧的浏览器的情况下，尚不依赖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>

Answer 3

主要有{{3}}用于检查滚动期间屏幕上是否可见/隐藏元素：

收听窗口滚动事件。
使用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表示元素在屏幕上完全可见。

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

3 个答案: