Find out if the scroll has reached the end of the DIV

Question

How do I know the user rolled the scroll bar of a div to the end? using jquery.

That’s all I’ve got so far

scrollTop();

but I don’t know how this command can help me

Answer 1

You can do it this way:

$(document).ready(function(){
    $('div').bind('scroll', function() {
        /*
        * scrollTop -> Quanto rolou
        * innerHeight -> Altura do interior da div
        * scrollHeight -> Altura do conteúdo da div
        */
        if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            $('body').append("<p>Fim da div</p>");
        }
    });
});

div{
    height: 150px;
    width: 80px;
    overflow-y:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>TESTE</p>
    <p>TESTE</p>
    <p>TESTE</p>
    <p>TESTE</p>
    <p>TESTE</p>
    <p>TESTE</p>
    <p>TESTE</p>
    <p>TESTE</p>
</div>

Source: SOEN Response