title: How can I detect scroll end of the specified element by JavaScript?
body: <p>I'm using Google Chrome 10 and writing JavaScript to detect scroll end.  </p>
  
  <p>To detect scroll end of <code>window</code>, the code below worked fine:</p>
  
  <pre><code>window.addEventListener(
      'scroll',
      function()
      {
          var scrollTop = document.documentElement.scrollTop ||
              document.body.scrollTop;
          var offerHeight = document.body.offsetHeight;
          var clientHeight = document.documentElement.clientHeight;
          if (offsetHeight &lt;= scrollTop + clientHeight)
          {
              // Scroll end detected
          }
      },
      false
  );
  </code></pre>
  
  <p>Now I want to detect scroll end of the specified element, like <code>&lt;section id="box" style="height: 500px; overflow: auto;"&gt;</code><br>
  This is the code that doesn't detect correctly:</p>
  
  <pre><code>document.getElementById('box').addEventListener(
      'scroll',
      function()
      {
          var scrollTop = document.getElementById('box').scrollTop;
          var offerHeight = document.getElementById('box').offsetHeight;
          var clientHeight = document.getElementById('box').clientHeight;
          if (offsetHeight &lt;= scrollTop + clientHeight)
          {
              // This is called before scroll end!
          }
      },
      false
  );
  </code></pre>
  
  <p>Could someone please fix my code? Thanks.</p>