Fire Javascript Event Cuando un DIV está en View

¿Es posible disparar un evento javascript específico cuando se visualiza una determinada DIV en la página?Fire Javascript Event Cuando un DIV está en View

Digamos, por ejemplo, que tengo una página muy grande, como 2500x2500 y tengo una div 40x40 que se encuentra en la posición 1980x1250. El div no se coloca necesariamente de forma manual, podría estar allí debido al contenido que lo empuja hacia allí. Ahora, ¿es posible ejecutar una función cuando el usuario se desplaza a un punto donde el div se vuelve visible?

Fuente

2010-01-29 Russ Bradberry

https://github.com/imakewebthings/waypoints o https://github.com/stutrek/scrollMonitor podría ayudar también –

No automáticamente. Tendría que atrapar eventos de desplazamiento y verificar que estén a la vista cada vez, comparando las coordenadas del rectángulo div con el rectángulo de la página visible.

Aquí hay un ejemplo mínimo.

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

Se podría mejorar esta por:

por lo que es coger onscroll en todos los antepasados que tienen overflowscroll o auto y el ajuste de los co-ords superior/izquierda por sus posiciones de desplazamiento
detección overflowscroll, auto y hidden recortando poniendo el div fuera de la pantalla
usando addEventListener/attachEvent para permitir que varios VisibilityMonitors y otras cosas usando los eventos de cambio de tamaño/desplazamiento
algunos hacks de compatibilidad a getElementRect para que los compañeros de ords más preciso en algunos casos, y algunos eventos no vinculante para evitar pérdidas de memoria IE6-7, si realmente lo necesitas

Fuente

2010-01-29 00:52:19 bobince

Puede reemplazar todo el código en getElementRect con el elemento incorporado.getBoundingClientRect(). –

He aquí un ejemplo de arranque usando 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>

Sólo se notifica una vez que el div aparece a la vista de la parte inferior. Este ejemplo no notifica cuando el div se desplaza fuera de la parte superior.

Fuente

2010-01-29 00:55:45 slolife

de nuevo, esto es para jQuery, y aunque yo soy todo para jQuery, en mi situación no podré usarlo. –

Luego tenga en cuenta que en la pregunta, la gente que publique conocerá sus limitaciones. También parece que las dos personas publicaron casi al mismo tiempo, por lo que no podrían haberlo sabido. – Cryophallion

Fire Javascript Event Cuando un DIV está en View

Respuesta

Cuestiones relacionadas