Skip to main content

jQuery Check if Div Scrolled to End

By Sam Deering
JavaScript
Share:

Simple jQuery code snippet to check if you have scrolled to the end of a div and raise an event. Useful when you have an inline element (overflow:scroll) that you want to know if someones scrolled down to the bottom. Could be used to check if someone has read terms and conditions on a registration form.

$(document).ready(function(){
    
    $('div').bind('scroll',chk_scroll);
});

function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
    {
        console.log("bottom");
    }

}

Other ways:

//scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight
if( obj.scrollTop == (obj.scrollHeight - obj.offsetHeight)) { }

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad