Skip to content
Loads additional content on a website when a user reaches the end of the page.
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Demos
Source
LICENSE
README.md
package.yml

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.