How to detect when you are at the bottom of scrollable div?

Question

I am having trouble detect when I am at the bottom of a scrollable div. I have a div that is absolute positioned, the div is set to 100% height and is scrollable. The div contains numerous articles one below the other.

My aim is to detect when the div has been scrolled to the bottom. I am using the following code for testing but the value for the scroll.height does not add up because it is giving me the height of the browser window instead of the height of the scrollable content.

$('#scroll_length').text($('.scroll').scrollTop() + ' -- ' + $('.scroll').innerHeight());

Any ideas?

This could be the answer: http://stackoverflow.com/questions/2837741/jquery-detecting-reaching-bottom-of-scroll-doesnt-work-only-detects-the-top http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom — Mehdi Karamosly, Jan 29 '13 at 16:45
Or this: http://stackoverflow.com/questions/5986389/using-jquery-how-do-i-force-a-visitor-to-scroll-to-the-bottom-of-a-textarea-to/5986499#5986499 — Christian, Jan 29 '13 at 16:45
Thanks for the answers. @Christian if you can put that link in answer I can tick it. — ORStudios, Jan 29 '13 at 16:51

score 1 · Accepted Answer · edited May 23 '17 at 11:56

I answered a similar question a while ago, and I believe it is still relevant: Using jQuery, how do I force a visitor to scroll to the bottom of a textarea to enable the submit button?

$('#terms').scroll(function () {
    if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
        $('#register').removeAttr('disabled');
    }
});

Simply give terms an id, and set the register button to disabled in the html. I also made a little fiddle to show it working: http://jsfiddle.net/ETLZ8/

score 1 · Answer 2 · answered Jan 29 '13 at 17:04

In Addition to @Christian Varga Answer...

I know i am not answering with a code, but i think it will be nice addition to the question to present a plugin to help achieve your goal.

Some times question become a knowledge base....

You might find this plugin useful

jQuery Waypoints

How to detect when you are at the bottom of scrollable div?

2 Answers2