有没有办法检测HTML元素何时被隐藏？

Question

使用JavaScript，是有可能当用户向下滚动足够远或者最小化浏览器或覆盖另一个窗口，以检测当某个元素不再是可见的，如？总体目标是仅当当前广告对用户不可见时才换出广告。

一个想法是有一个非常简单的，无形的Java Applet与页面每次paint（）方法被调用时通信。我很确定这会工作，但我想尽可能避免使用小程序。

Answer 1

我不知道是否有一种方法来检测一个窗口是在元素，或者如果窗口是最小化（虽然我觉得你可以通过挂钩东西放到窗口的模糊做后者？我米不知道...）。无论如何，就滚动而言，问题的这一部分已被问及几次之前，我想出了如何做到这一点。在这个例子中，当元素滚动到视图中时会发生什么，但逻辑当然是相同的。总之，代码：

$(document).ready(function() { 
    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
    } 

    var myelement = $('#formcontainer'); 
    var mymessage = $('#mymessage'); 
    $(window).scroll(function() { 
     if(isScrolledIntoView(myelement)) { 
      mymessage.hide(); 
     } else { 
      mymessage.show(); 
     } 
    }); 
}); 

没有太多的jQuery的具体谈谈，这样你可以采取的东西了：

window.addEventListener('load', function() { 
    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
    } 

    var el = document.getElementById('myelement'); 
    window.addEventListener('scroll', function() { 
     if(isScrolledIntoView(el)) { 
      // do something when element is scrolled into view 
     } else { 
      // do something when it is not in view 
     } 
    }, false); 
}, false);