Cómo detectar cuando el usuario se desplaza hasta la parte inferior del div con jQuery

Has creado un elemento div con contenido dinámico que presenta un " ajuste de desbordamiento automático". Para mejorar la experiencia del usuario, desea cargar contenido adicional cuando el usuario se desplaza hasta la parte inferior de este cuadro div. Sin embargo, no estás seguro de cómo detectar ese evento específico.

La clave para esta detección radica en utilizar propiedades y métodos específicos de jQuery:

• $().scrollTop(): Indica el número de píxeles que se ha desplazado el elemento
• $().innerHeight(): Representa la altura interior del elemento
• DOMElement.scrollHeight: Devuelve la altura del contenido del elemento

Para determinar cuándo el usuario ha llegado al final del div, puede comparar la suma de las dos primeras propiedades a la tercera propiedad. Cuando estos valores coinciden, se ha alcanzado el final del div.

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

Esta solución utiliza el método on(), que se prefiere para el manejo de eventos en las versiones 1.7 de jQuery.

Notas adicionales:

• El detector de eventos se adjunta al div con el ID #flux, que representa el elemento que le interesa monitorear.
• Se utiliza la función alert() con fines de demostración. Puede incluir su propia lógica para cargar contenido adicional aquí.
• Puede encontrar un ejemplo en vivo en http://jsfiddle.net/doktormolle/w7X9N/.