artsy / jquery-on-infinite-scroll

Callback when you reach the bottom of the page and ajax requests finish. Useful as an infinite scroll callback.

jQuery.onInfiniteScroll

Callback when you reach the bottom of the page and ajax requests finish. Useful as an infinite scroll callback.

Example

$.onInfiniteScroll(function() {
    // Fetch & append some content
});

$.onInfiniteScroll(function() {
    // Pass an optional offset from the page bottom at which to trigger the callback.
}, { offset: 100 });

// Remove the event listeners.
$.destroyInfiniteScroll();

Contributing

Please fork the project and submit a pull request with tests. Install node modules npm install and run tests with make test.

License

MIT

jquery-on-infinite-scroll's Issues

Flank-triggered, not level-triggered

tl;dr: this module seems to be flank-triggered, not level-triggered, which leads to the usual problem, i.e., missing updates when there is no 'flank' (here: scroll event).

This error can be triggered in two different scenarios:

1. On page load, there's less than a screenful of content. Nothing triggers at that point, and since there's no way to scroll, jquery-on-infinite-scroll never triggers at all. In case you're tempted to say "well, just load more than one screenful then", let me tell you: that's kinda what I intended to use this plugin for. Temporary workaround for me: well, just load more than one screenful then.
2. When scrolling extremely fast, it seems to be possible to trigger precisely one event. My callback loads precisely one more cell of a table, so sometimes my callback doesn't change the height of the overall document. If this happens, and the user already has reached the bottom, then jquery-on-infinite-scroll doesn't notice that after my callback completes, the user is still at the bottom. Temporary workaround for me: load enough new elements so that I know I add height to the overall document.

Suggested fix (both actions necessary, as far as I can see):

1. Inside .onInfiniteScroll, run your check the first time. Don't wait for a user action. There are people with huge screens, y'know.
2. After running the callback, re-run the check currently in onScroll. As this might change behavior for other people, there's two ways to go about this:
   • too bad for other people. Tell them to fix their code, and re-run the check unconditionally.
   • recognize a new option, something like recheck, so that a call could look like this: $.onInfiniteScroll(myFn, { offset: 50, recheck: true });