Skip to content
Loads additional content on a website when a user reaches the end of the page.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Source Adding call(this) Feb 17, 2011

ScrollLoader - Copyright (c) 2010 Christoph Pojer

Fires an event when the user reaches a certain boundary.


This Plugin is part of MooTools PowerTools!.


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

Configurable Options / Events


  • 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


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