有沒有辦法檢測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);