Jim Yi

Overview

Load extra content when the user scrolls the window or an element towards the bottom. This is probably most useful when you want to use Ajax to load the extra content.

Syntax

$(element).scrollLoader(options);

Options

ratio (optional – default: .05): How close to the scrollbar is to the bottom of the element before triggering a load. Use ratio: 0 for absolute bottom.
Ratio = (total scroll height – current scroll position) / total scroll height.

loadContent (required): Function to execute when the scrollbar reaches the specified ratio.

Available Triggers

$(element).trigger("enableLoad"); // enables this plugin

$(element).trigger("disableLoad"); // disables this plugin

$(element).trigger("manualLoad"); // manually trigger the loadContent function

Example Usage

var offset = 2;
$(document).ready(function() {
  $(window).scrollLoader({
    loadContent: function() {
      $("#news_list").append("<li>Loading...</li>");
      // since this ajax call might take a while
      $(window).trigger("disableLoad");
      $.getJSON("/news/list?offset=" + offset++, function(data) {
        // remove the loading text
        $("#news_list li:last").remove();
        for (var i = 0; i < data.news.length; i++) {
          $("#news_list").append("<li>" + data.news[i].headline + "</li>");
        }
        // now that the ajax call is done, we can re-enable this
        $(window).trigger("enableLoad");
      });
    }
  });
});

Demo - scrollLoader bound to both the window and an element with overflow: auto
Download - jquery.scroll.loader.js