¿Cómo puedo detectar el final de desplazamiento del elemento especificado por JavaScript?

Question

Estoy usando Google Chrome 10 y escribiendo JavaScript para detectar scroll end.

Para detectar extremo de desplazamiento de window, el código de abajo funcionó bien:

window.addEventListener(
    'scroll', 
    function() 
    { 
     var scrollTop = document.documentElement.scrollTop || 
      document.body.scrollTop; 
     var offerHeight = document.body.offsetHeight; 
     var clientHeight = document.documentElement.clientHeight; 
     if (offsetHeight <= scrollTop + clientHeight) 
     { 
      // Scroll end detected 
     } 
    }, 
    false 
); 

Ahora queremos detectar final de desplazamiento del elemento especificado, como <section id="box" style="height: 500px; overflow: auto;">
Este es el código que no detecta correctamente :

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 <= scrollTop + clientHeight) 
     { 
      // This is called before scroll end! 
     } 
    }, 
    false 
); 

¿Alguien podría corregir mi código? Gracias.

Answer 1

Reparado.

document.getElementById('box').addEventListener(
    'scroll', 
    function() 
    { 
     var scrollTop = document.getElementById('box').scrollTop; 
     var scrollHeight = document.getElementById('box').scrollHeight; // added 
     var offsetHeight = document.getElementById('box').offsetHeight; 
     // var clientHeight = document.getElementById('box').clientHeight; 
     var contentHeight = scrollHeight - offsetHeight; // added 
     if (contentHeight <= scrollTop) // modified 
     { 
      // Now this is called when scroll end! 
     } 
    }, 
    false 
)