title: How to capture scroll event?
body: <p>I want to implement infinite scrolling. Below is a short form of my layout. Since I have some elements relative positioned the javascript scroll event does not fire. </p>
  
  <p>How can I fix this problem in order to get the scroll event to be fired and implement the infinite scrolling?</p>
  
  <p>My main layout is:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="wrapper"&gt;
          &lt;div id="header"&gt;
          ...
          &lt;/div&gt; &lt;%-- header --%&gt;
  
          &lt;div id="main"&gt;
          ...
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;%-- wrapper --%&gt;
  &lt;/div&gt; &lt;%-- container --%&gt;
  &lt;div id="footer"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS is:</p>
  
  <pre><code>#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;
  } 
  </code></pre>
  
  <p>What do I have to change such that I can receive the browser scroll event with my layout to implement infinite scrolling?</p>