"Endless scrolling" effect in a HTML table [closed]

Question

I am displaying a scrolled data table in a web page. This table has several thousands of dynamic rows, so it is loaded from the server (via AJAX).

The user can scroll up and down, so what I need is to detect when the user reaches the end of the scrollbar (that is, the last row at the bottom of the table) in order to request and show more data.

You can find this effect in google reader, when you scroll down to the last post in a given feed, google requests and shows new posts in a transparent way, but I can't figure out how they achieve it.

By the way, right now I am using a YUI Datatable

Answer 1

Thank you for your answers. That's my final working code (inspired by Greg and ajaxian.com), that uses some jQuery functions and works with the YUI DataTable.

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

My next step is to implement my own YUI Paginator to achieve a complete integration with YUI components :)

Answer 2

I'm not familiar with the specific element you are using, but in order to implement this on a full size window, you can do the following:

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

Where scrollTop is essentially "how many pixels have been scrolled". I assume applying this to the table you are working with will do the job.