Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loads additional content on a website when a user reaches the end of the page.

branch: master
README.md

ScrollLoader - Copyright (c) 2010 Christoph Pojer

Fires an event when the user reaches a certain boundary.

Screenshot

This Plugin is part of MooTools PowerTools!.

Build

Build via Packager, requires MooTools Core and MooTools Class-Extras to be registered to Packager already

packager register /path/to/scroll-loader
packager build ScrollLoader/* > scroll-loader.js

To build this plugin without external dependencies use

packager build ScrollLoader/* +use-only ScrollLoader > scroll-loader.js

How to use

See Demos/index.html

You can create an instance of ScrollLoader via the following code

new ScrollLoader({
    onScroll: function(){
        // User has reached a certain boundary
        // Let's make a Request for new content

        this.detach(); // While waiting, we detach the listener so the event does not fire accidentally

        var scroll = this; // Save a reference
        new Request(url, {
            onSuccess: function(text){
                new Element('div', {text: text}).inject(myElement); // Add the new content

                scroll.attach(); // Attach the event again so the event fires when you hit the bottom again
            }
        }).get();
    }
});

Configurable Options / Events

Options

  • area: (number, defaults to 50) The boundary from the bottom/right where the event is fired in
  • mode: (string, defaults to vertical) Either vertical or horizontal for bottom or right
  • container: (element, defaults to null) The used element or the window

Events

  • scroll - fires when the user reaches a certain boundary specified by the 'area' option
Something went wrong with that request. Please try again.