Feuer-Javascript-Ereignis Wenn ein DIV in Sicht ist

Ist es möglich, ein bestimmtes Javascript-Ereignis auszulösen, wenn ein bestimmtes DIV auf der Seite in Sicht kommt?Feuer-Javascript-Ereignis Wenn ein DIV in Sicht ist

Sagen Sie zum Beispiel, ich habe eine sehr große Seite, wie 2500x2500 und ich habe eine 40x40 div, die auf Position 1980x1250 sitzt. Das div ist nicht unbedingt manuell positioniert, es könnte da sein, weil der Inhalt es dorthin treibt. Ist es jetzt möglich, eine Funktion auszuführen, wenn der Benutzer zu einem Punkt scrollt, an dem das div sichtbar wird?

Quelle

2010-01-29 Russ Bradberry

https://github.com/imakewebthings/waypoints oder https://github.com/stutrek/scrollMonitor könnte auch helfen –

Nicht automatisch. Sie müssten Bildlaufereignisse abfangen und jedes Mal prüfen, ob sie angezeigt werden, indem Sie die Koordinaten des div-Rechtecks mit dem sichtbaren Seitenrechteck vergleichen.

Hier ist ein minimales Beispiel.

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

Sie könnten verbessern dies durch:

es onscroll auf allen Vorfahren fangen machen, die
Erkennung overflow für ihre Scroll-Positionen overflowscroll oder auto und Einstellung der oben/links Co-ords haben scroll, auto und hidden Zuschneiden der div off-screen
mit addEventListener/attachEvent mehr VisibilityMonitors und andere Dinge, über die Größe verändern/Scroll-Ereignisse
einige Kompatibilitäts Hacks getElementRect zu ermöglichen, die Co-ords genauer in einigen Fällen zu machen, und ein Ereignis unbinding IE6-7 Speicherlecks zu vermeiden, wenn du wirklich musst.

Quelle

2010-01-29 00:52:19 bobince

Sie können den gesamten Code in getElementRect durch das eingebaute Element.getBoundingClientRect() ersetzen. –

Hier ist ein Starter Beispiel mit 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>

Es informiert nur einmal die div von unten in Sicht kommt. In diesem Beispiel wird nicht benachrichtigt, wenn die Div von oben nach unten scrollt.

Quelle

2010-01-29 00:55:45 slolife

wieder dies ist für jQuery, und während ich alles für jQuery bin, in meiner Situation werde ich nicht in der Lage sein, es zu verwenden. –

Dann bitte beachten Sie, dass in der Frage, so dass die Entsendung Ihre Grenzen kennt. Es scheint auch, dass beide Leute fast genau zur selben Zeit gepostet haben, also konnten sie es nicht wissen. – Cryophallion

Feuer-Javascript-Ereignis Wenn ein DIV in Sicht ist

Antwort

Verwandte Themen