Как захватить событие прокрутки?

Question

Я хочу реализовать бесконечную прокрутку. Ниже представлена ​​краткая форма моего макета. Поскольку у меня есть некоторые относительные элементы, событие javascript scroll не срабатывает.

Как исправить эту проблему, чтобы запустить событие прокрутки и реализовать бесконечную прокрутку?

Моя основная раскладка:

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

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

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

И мой 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; 
} 

Что я должен изменить таким образом, что я могу получить событие браузера прокрутки с моей макет реализовать бесконечный скроллинг ?

Answer 1

Правильный способ его реализации:

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

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

Answer 2

Это то, что я использовал в моем коде ...

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

Функция как ниже

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

После пересечения содержимого 400px, прокрутка начнется и будет бесконечным .. наслаждаться

Answer 3

EDIT: Так как вы помечено ваш вопрос jquery ...

---

Чтобы сгореть ваше событие прокрутки с помощью JQuery ...

HTML:

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

JQuery:

$(document).ready(function() { 

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

}); 

См: http://api.jquery.com/scroll/