Como detectar quando o usuário rola para o final do Div com jQuery

Você criou um elemento div com conteúdo dinâmico que apresenta um " configuração de estouro automático". Para aprimorar a experiência do usuário, você deseja carregar conteúdo adicional quando o usuário rolar até o final desta caixa div. No entanto, você não tem certeza de como detectar esse evento específico.

A chave para essa detecção está na utilização de propriedades e métodos específicos do jQuery:

• $().scrollTop(): Indica o número de pixels que o elemento foi rolado
• $().innerHeight(): Representa a altura interna do element
• DOMElement.scrollHeight: Retorna a altura do conteúdo do elemento

Para determinar quando o usuário atingiu o final da div, você pode comparar a soma das duas primeiras propriedades para a terceira propriedade. Quando esses valores correspondem, o final do div foi alcançado.

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

Esta solução utiliza o método on(), que é preferido para manipulação de eventos nas versões 1.7 do jQuery.

Notas adicionais:

• O ouvinte de evento é anexado ao div com o ID #flux, que representa o elemento que você está interessado em monitorar.
• A função alert() é usada para fins de demonstração. Você pode incluir sua própria lógica para carregar conteúdo adicional aqui.
• Um exemplo ao vivo pode ser encontrado em http://jsfiddle.net/doktormolle/w7X9N/.