"Endless scrolling" effect in a HTML table

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

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.

Answer 2

There is a property I noticed while reading through DOM properties in Firebug today called scrollY (in Firebug under the DOM tab go to content > scrollY) which appears to be the amount of pixels left to scroll on the window. Try seeing if this is also created for scrollable elements. Then you can use Yuval's function to load new data.

Answer 3

I did that effect here within a div element (not a table but maybe you can still get some ideas). The JS is pretty readable so you're welcome to use it for inspiration.

Answer 4

I've just googled for it and found this article: Implementing Dynamic Scroll with Ajax, JavaScript, and XML. It looks like a thorough explanation.

Answer 5

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 6

Ick. Not a big fan of endless scrolling; it breaks some of the key assumptions people make about how the Web works. Please promise you will only implement it under the following conditions:

1) you are not substituting it for a perfectly good page that loads everything in a nice long table and lets the user use Ctrl-F to search inside the page for what time Fringe comes on.

2) you don't plan on inserting an ad at the bottom of each chunk of scrolled data.

3) you are providing a working fallback (hey, there's that nice long table again) for blind people and people browsing the Web with JavaScript disabled.

Answer 7

If you're using the YUI, it has a tableScrollEvent that gets fired when the table scrolls. Couple this with the dataTable's generateRequest function and you could implement endless scrolling by watching the tableScrollEvent and starting a request when you get near the end of your dataset.

The YUI doc's don't have a specific example for this case, but does show you how to handle the data returned by generateRequest

Answer 8

You can see it working here YUI only. In contrast with one of the solutions suggested above, the scrollbar moves continuously, the position and size reflect the true size and position of the viewable area, it doesn't load the next batch when the scrollbar reaches bottom. The scrollbar reaches bottom only when the last of the whole records is at the bottom of the viewing area. Of course, this only works if you do know how many records there are.