JavaScript Journal - Getting Started with Infinite Scrolling
Infinite scrolling is a really cool effect and a great use of AJAX. It also has some weird side-effects that you'll need to be aware of. This is the starting point I used in the event version of the Gallery Viewer. The major parts are throttling the scroll event and detecting the scrolling direction. Because I am loading images I want to get started on the request as soon as possible, or I would wait until they were close to the bottom of the page before loading. There is a also a little <div>
with a message that keeps jumping to the bottom of the page.
// keep scroll position so we can use it
// later to detect scroll direction
var oldScrollPosition = 0;
// throttle down the scroll events to once ever 1.5 seconds
var throttled = _.throttle(function(e) {
var newScrollPosition = $(this).scrollTop();
// check if they scrolled down the page
if(newScrollPosition > oldScrollPosition) {
self.pullVideoList(self.num);
oldScrollPosition = newScrollPosition;
}
}, 1500);
$(window).scroll(throttled);