Wie scrollevent erfassen?

Question

Ich möchte unendlich scrollen implementieren. Unten ist eine kurze Form meines Layouts. Da ich einige Elemente relativ positioniert habe, wird das JavaScript-Scroll-Ereignis nicht ausgelöst.

Wie kann ich dieses Problem beheben, um das Scroll-Ereignis ausgelöst zu bekommen und das unendliche Scrollen zu implementieren?

Mein Haupt Layout ist:

<div id="container"> 
    <div class="wrapper"> 
     <div id="header"> 
     ... 
     </div> <%-- header --%> 

     <div id="main"> 
     ... 
     </div> 

    </div> <%-- wrapper --%> 
</div> <%-- container --%> 
<div id="footer"> 
</div> 

Und mein CSS ist:

#container { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 35px; 
    left: 0; 
    right: 0; 
    overflow-y: auto;  
    overflow-x: hidden;  
} 

.wrapper { 
    margin: 0 auto; 
    width: 960px; 
    position: relative; 
} 

#header { 
    position: relative; 
} 

#main { 
} 

#footer { 
    z-index: 2; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 35px; 
} 

Was muss ich so ändern, dass ich den Browser Scroll-Ereignis mit meinem Layout empfangen kann unendliche Scrollen zu implementieren ?

Answer 1

Der korrekte Weg, es zu implementieren ist:

<div id="container" onscroll="Onscrollfnction();"> 

<script> 
function Onscrollfnction() { 
     alert("scroll"); 
    }; 
</script> 

Answer 2

Dies ist, was ich in meinem Code verwendet ...

<div id="DataDiv" style="overflow: auto; width: 280px; height:400px; margin-top: 10px;" 
        onscroll="Onscrollfnction();"> 
     my content here 
</div> 

Funktion ist als unten

function Onscrollfnction() { 
      var div = document.getElementById('DataDiv'); 
      div.scrollLeft; 
      return false; 
     }; 

Nach Inhalt Kreuzung 400px, beginnt Scrollen und wird unendlich sein .. genießen

Answer 3

EDIT: Da hat Sie Ihre Frage mit jquery ...

---

Ihre Scroll-Ereignis ausgelöst jQuery ...

HTML:

<div id="container"> 
    CONTENT 
</div> 

jQuery:

$(document).ready(function() { 

    $('#container').scroll(function() { 
     alert('scroll'); 
     // presumably your infinite scrolling code here 
    }); 

}); 

See: http://api.jquery.com/scroll/