javascript - 有没有办法通过 JavaScript 来访问网页的一部分是否正在屏幕上呈现？

Question

目前我们的逻辑在客户端页面的 iframe 内运行。我们现在请求检测 iFrame 当前是否在查看窗口中(滚动到屏幕外)。

我只是有一个想法，这可能是 GPU 可能已经拥有的东西，这将允许它在页面上提供更好的性能，关于它正在渲染的内容，我想知道是否有人知道这是否数据可以通过 API/lib(例如 OpenGL)访问。

我知道提供实际的像素信息可能是一个很大的安全问题，但是只要访问是否正在渲染特定的 iFrame 将有助于可见性检测。

有谁知道是否有办法做到这一点？到目前为止，目前的阅读并未表明这是可能的，但我正在继续我的搜索，并认为我也应该在这里发布。

任何信息或方向都会有帮助。谢谢!

Answer 1

您可以计算该对象是否在您的视口(viewport)内。

http://plnkr.co/edit/91gybbZ7sYVELEYvy1IK?p=preview

$(document).ready(function() {
  myElement = $('.someObject');
  window.onscroll = function() {

    var screenTop = $(window).scrollTop();
    var screenBottom = screenTop + $(window).height();    
    var elTop = $(myElement).offset().top;
    var elBottom = elTop + $(myElement).height();

    var info = 'screenTop:' + screenTop + ' screenBottom:' + screenBottom + ' elTop:' + elTop + ' elBottom:' + elBottom;

    if((elBottom <= screenBottom) && (elTop >= screenTop)) {
      $('.info').html('Element is in view + <small>' + info + '</small>');
    } else {
      $('.info').html('Element is out of view + <small>' + info + '</small>');
    }

  }
})