Événement Javascript de feu quand un DIV est dans la vue

Est-il possible de déclencher un événement javascript spécifique quand un certain DIV apparaît sur la page? Par exemple, j'ai une très grande page, comme 2500x2500 et j'ai un div 40x40 qui se trouve à la position 1980x1250. Le div n'est pas nécessairement positionné manuellement, il pourrait être là en raison du contenu qui le pousse là. Maintenant, est-il possible d'exécuter une fonction lorsque l'utilisateur fait défiler jusqu'à un point où la div devient visible?Événement Javascript de feu quand un DIV est dans la vue

Source

2010-01-29 Russ Bradberry

https://github.com/imakewebthings/waypoints ou https://github.com/stutrek/scrollMonitor pourrait aider aussi –

Pas automatiquement. Vous devez attraper les événements de défilement et vérifier qu'ils sont visibles à chaque fois en comparant les coordonnées du rectangle div avec le rectangle de la page visible.

Voici un exemple minimal.

<div id="importantdiv">hello</div> 

<script type="text/javascript"> 
    function VisibilityMonitor(element, showfn, hidefn) { 
     var isshown= false; 
     function check() { 
      if (rectsIntersect(getPageRect(), getElementRect(element)) !== isshown) { 
       isshown= !isshown; 
       isshown? showfn() : hidefn(); 
      } 
     }; 
     window.onscroll=window.onresize= check; 
     check(); 
    } 

    function getPageRect() { 
     var isquirks= document.compatMode!=='BackCompat'; 
     var page= isquirks? document.documentElement : document.body; 
     var x= page.scrollLeft; 
     var y= page.scrollTop; 
     var w= 'innerWidth' in window? window.innerWidth : page.clientWidth; 
     var h= 'innerHeight' in window? window.innerHeight : page.clientHeight; 
     return [x, y, x+w, y+h]; 
    } 

    function getElementRect(element) { 
     var x= 0, y= 0; 
     var w= element.offsetWidth, h= element.offsetHeight; 
     while (element.offsetParent!==null) { 
      x+= element.offsetLeft; 
      y+= element.offsetTop; 
      element= element.offsetParent; 
     } 
     return [x, y, x+w, y+h]; 
    } 

    function rectsIntersect(a, b) { 
     return a[0]<b[2] && a[2]>b[0] && a[1]<b[3] && a[3]>b[1]; 
    } 

    VisibilityMonitor(
     document.getElementById('importantdiv'), 
     function() { 
      alert('div in view!'); 
     }, 
     function() { 
      alert('div gone away!'); 
     } 
    ); 
</script>

Vous pouvez améliorer en:

ce qui en fait attraper onscroll sur tous les ancêtres qui ont overflowscroll ou auto et en ajustant les co-ords haut/gauche pour leurs positions de défilement
détection overflowscroll, auto et hidden recadrage mettant la div hors de l'écran
à l'aide addEventListener/attachEvent pour permettre à plusieurs VisibilityMonitors et d'autres choses en utilisant les événements Resize/défilement
quelques hacks de compatibilité à getElementRect pour rendre les co-ords plus précis dans certains cas, et un événement sans engagement pour éviter les fuites de mémoire IE6-7, si tu en as vraiment besoin.

Source

2010-01-29 00:52:19 bobince

Vous pouvez remplacer tout le code dans getElementRect avec le intégré element.getBoundingClientRect(). –

Voici un exemple de démarrage en utilisant jQuery:

<html> 
<head><title>In View</title></head> 
<body> 
    <div style="text-align:center; font-size:larger" id="top"></div> 
    <fieldset style="text-align:center; font-size:larger" id="middle"> 
     <legend id="msg"></legend> 
     <div>&nbsp;</div> 
     <div id="findme">Here I am!!!</div> 
    </fieldset> 
    <div style="text-align:center; font-size:larger" id="bottom"></div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var $findme = $('#findme'), 
     $msg = $('#msg'); 

    function Scrolled() { 
     var findmeOffset = $findme.offset(), 
      findmeTop = findmeOffset.top, 
      scrollTop = $(document).scrollTop(), 
      visibleBottom = window.innerHeight; 

     if (findmeTop < scrollTop + visibleBottom) { 
      $msg.text('findme is visible'); 
     } 
     else { 
      $msg.text('findme is NOT visible'); 
     } 
    } 

    function Setup() { 
     var $top = $('#top'), 
      $bottom = $('#bottom'); 

     $top.height(500); 
     $bottom.height(500); 

     $(window).scroll(function() { 
      Scrolled(); 
     }); 
    } 

    $(document).ready(function() { 
     Setup(); 

    }); 
</script> 
</body> 
</html>

Il avertit qu'une fois que la div est en vue du fond. Cet exemple n'indique pas quand le div défile du haut.

Source

2010-01-29 00:55:45 slolife

encore une fois c'est pour jQuery, et tandis que je suis tout pour jQuery, dans ma situation je ne serai pas capable de l'utiliser. –

Ensuite, veuillez noter que dans la question, les personnes qui postent connaîtront vos limites. Il semble aussi que les deux personnes soient postées presque exactement au même moment, donc ils ne pouvaient pas savoir. – Cryophallion

Événement Javascript de feu quand un DIV est dans la vue

Répondre

Questions connexes