Écouteur d'événements pour quand l'élément devient visible ?

Question

Je suis en train de construire une barre d'outils qui va être incluse dans une page. la div dans laquelle elle va être incluse sera affichée par défaut :aucune. Y a-t-il un moyen de mettre un écouteur d'événements sur ma barre d'outils pour l'écouter quand il devient visible afin qu'il puisse s'initialiser ? ou dois-je lui passer une variable de la page contenant ?

Merci. Merci.

Answer 1

var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
    if(targetNode.style.display != 'none'){
        // doSomething
    }
});
observer.observe(targetNode, { attributes: true, childList: true });

Je suis peut-être un peu en retard, mais vous pouvez simplement utiliser le MutationObserver pour observer tout changement sur l'élément souhaité. Si un changement se produit, il vous suffit de vérifier si l'élément est affiché.

Answer 2

J'ai eu ce même problème et j'ai créé un plugin jQuery pour le résoudre pour notre site.

https://github.com/shaunbowe/jquery.visibilityChanged

Voici comment vous l'utiliseriez en fonction de votre exemple :

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

Answer 3

Si vous voulez juste exécuter du code quand un élément devient visible dans la vue :

function onVisible(element, callback) {
  new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.intersectionRatio > 0) {
        callback(element);
        observer.disconnect();
      }
    });
  }).observe(element);
}

Lorsque l'élément est devenu visible, l'observateur d'intersection appelle callback puis se détruit avec .disconnect().

Utilisez-le comme ceci :

onVisible(document.querySelector("#myElement"), () => console.log("it's visible"));