Gibt es eine Möglichkeit zu erkennen, wenn ein HTML-Element nicht sichtbar ist?

Question

Kann mit Javascript erkannt werden, wenn ein bestimmtes Element nicht mehr sichtbar ist, z. B. wenn der Benutzer weit genug scrollt oder wenn der Browser minimiert oder mit einem anderen Fenster abgedeckt wird? Das Gesamtziel besteht darin, eine Werbung nur dann auszutauschen, wenn die aktuelle Anzeige für den Benutzer nicht sichtbar ist.

Eine Idee wäre, dass jedes Mal, wenn die paint() -Methode aufgerufen wird, ein sehr einfaches, unsichtbares Java-Applet mit der Seite kommuniziert. Ich bin mir ziemlich sicher, dass das funktionieren würde, aber ich würde es vermeiden, wenn möglich Applets zu verwenden.

Answer 1

Ich bin mir nicht sicher, ob es eine Möglichkeit gibt zu erkennen, ob ein Fenster über dem Element ist oder ob das Fenster minimiert ist (obwohl ich denke, dass Sie letzteres durch Einhängen von etwas in die Unschärfe des Fensters tun können) ich bin mir nicht sicher...). Wie auch immer, beim Scrollen wurde dieser Teil der Frage ein paar Mal zuvor gestellt, and this is the quick demo Ich kam auf, um zu zeigen, wie es geht. In dem Beispiel passiert etwas, wenn das Element in die Ansicht gerollt wird, aber die Logik ist natürlich dieselbe. Wie auch immer, ist der Code:

$(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(); 
     } 
    }); 
}); 

gibt es nicht viel jQuery spezifische Informationen, so dass Sie das Zeug nehmen:

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