Jak przechwytywać zdarzenia przewijania?

Question

Chcę zaimplementować nieskończone przewijanie. Poniżej znajduje się krótka forma mojego układu. Ponieważ niektóre elementy są względnie ustawione, zdarzenie przewijania javascript nie jest uruchamiane.

Jak mogę rozwiązać ten problem, aby zwolnić zdarzenie przewijania i wdrożyć nieskończone przewijanie?

Główny układ jest:

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

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

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

A mój CSS:

#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; 
} 

Co muszę zmienić tak, że mogę odebrać zdarzenie przewijania przeglądarka z moim układzie wdrożyć nieskończone przewijanie ?

Answer 1

Prawidłowy sposób wdrożenia to:

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

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

Answer 2

To właśnie użyłem w moim kodu ...

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

Funkcja jest poniżej

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

po przekroczeniu zawartości 400px, przewijanie rozpocznie i będzie nieskończona .. cieszyć

Answer 3

EDIT: Ponieważ określili swoje pytanie z jquery ...

---

na ogień wydarzenie przewijania przy użyciu jQuery ...

HTML:

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

jQuery:

$(document).ready(function() { 

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

}); 

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