ScrollIntent.js

Infinite Scrolling with a Footer Demo

In this demo, scrollIntent.js is used to create infinite scrolling that loads content as you reach the bottom of the page. However, content will only load when the page is being scrolled slowly -- when we can assume the user is focused on content. When srolling to the bottom of the page quickly, additional content won't load, allowing the user to reach the footer.

ScrollIntent.js is given 2 actions that describe the behaviour of a user and what functionality should be executed based on that behaviour.

Actions

The following actions are used to load additional content:

Load more content when the user scrolls down past a waypoint 300px from the bottom of the screen, at a speed slower than 100px per 250ms (using the mousewheel or scrollbar)
Load more content when the user scrolls down past a waypoint 300px from the bottom of the screen (using the down or space keys)

In code, these actions are written like so:


      var actions = [

  //ACTION 1
  {
    // When the user is scrolling via mousewheel or scrollbar
    scrollMethod: ["mousewheel", "scrollbar"],

    // Bottom of the page
    waypoint: "100%",

    /*
     * Makes the waypoint relative to the page rather than the window
     * that scrollIntent is bound to
     */
    waypointRelativeTo: document.body,

    // Move the waypoint up from the bottom of the body/document, by 300px
    waypointOffset: -300,

    // Only when the user is scrolling less than 80px per 200ms
    maxSpeed: 80,

    // Only when the user is scrolling down
    direction: "down",

    /*
     * Execute the fakeAjax.load() function when all of the above
     * conditions are met
     */
    callback: function(scrollIntent) {

      fakeAjax.load();
    }
  },

  //ACTION 2
  {
    // When the user is scrolling by hitting space or the down key
    scrollMethod: ["down", "space"],

    // Only execute the callback if this is the first key press per action
    keyPressesPerEvent: 1,

    // Bottom of the page
    waypoint: "100%",

    /*
     * Makes the waypoint relative to the page rather than the window
     * that scrollIntent is bound to
     */
    waypointRelativeTo: document.body,

    // Move the waypoint up from the bottom of the body/document, by 2 screens
    waypointOffset: -300,

    // Execute the fakeAjax.load() function when all of the above conditions are met
    callback: function() {

      fakeAjax.load();
    }
  }
];

// scrollIntent options
var options = {

  // Turn on developerIndicators (red and blue lines to show waypoints)
  developerIndicators: true,

  // Move the scrollY position to 90% of the window
  scrollYOffset: "90%"
};

// Initiate scrollIntent on the window with the above actions and options
scrollIntent = new ScrollIntent(window, actions, options);

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis vel orci sit amet placerat. Morbi eget elementum nisl. Quisque accumsan magna vel lorem mollis, vitae vulputate libero gravida. Suspendisse viverra luctus nulla at ultrices. Duis non mauris dignissim nibh vulputate ullamcorper. Curabitur accumsan molestie consectetur. Aenean ultrices risus in magna volutpat porttitor. Morbi ac orci volutpat, molestie massa vel, dictum nibh. In eget massa quam. Donec convallis eros purus, mattis accumsan lectus mollis at. Aliquam varius, lectus eget venenatis volutpat, lorem risus semper urna, nec rutrum purus metus sit amet metus. Proin ut urna tellus. Nullam nec lorem enim.

Duis vel ante at odio dapibus posuere. Aenean vel nibh nulla. Vestibulum porttitor orci eu nisi dapibus condimentum. Sed sollicitudin, metus a tristique mollis, ipsum enim viverra dolor, porttitor porttitor leo urna a lectus. Vivamus ut dui eleifend, pulvinar mi sit amet, dapibus elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam porta turpis est, non mollis lacus tincidunt a. Suspendisse ut felis congue, interdum nisl a, molestie nunc. Mauris porta dui ut lorem eleifend, ac aliquam dolor gravida. Curabitur luctus libero vel sem ullamcorper, a semper sem tincidunt. Nullam erat nisl, euismod sed dapibus id, facilisis ut arcu. In auctor adipiscing ullamcorper. Phasellus porta, purus ut condimentum ullamcorper, purus turpis interdum nisi, sit amet tempus massa orci quis massa. Integer non sem quis eros gravida volutpat nec eu mi. Integer ac elementum nibh.

Etiam sit amet tortor ultricies, sollicitudin arcu aliquam, semper lectus. Nulla nec metus justo. Mauris condimentum eget metus eget pellentesque. Ut sit amet augue eget enim interdum commodo sit amet ut felis. Aliquam pretium pulvinar nulla. Aliquam erat volutpat. Cras imperdiet massa quis elit posuere, ut ullamcorper dui aliquam. Nam non laoreet lectus. Fusce commodo diam ac lorem auctor consectetur.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed purus leo. Nunc rutrum odio eu pretium sagittis. In hac habitasse platea dictumst. Quisque condimentum euismod tellus eu dapibus. Pellentesque non sapien imperdiet, posuere urna non, cursus lacus. Vivamus egestas non nibh ut accumsan. Sed volutpat nisi in feugiat vestibulum. Suspendisse dapibus lorem eu tincidunt bibendum. Maecenas vestibulum dolor sed tempor molestie.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed purus leo. Nunc rutrum odio eu pretium sagittis. In hac habitasse platea dictumst. Quisque condimentum euismod tellus eu dapibus. viverra luctus nulla Pellentesque non sapien imperdiet, posuere urna non, cursus lacus. Vivamus egestas non nibh ut accumsan. Sed volutpat nisi in feugiat vestibulum. Suspendisse dapibus lorem eu tincidunt bibendum. Maecenas vestibulum dolor sed tempor molestie.

Duis vel ante at odio dapibus posuere. Aenean vel nibh nulla. Vestibulum porttitor orci eu nisi dapibus condimentum. Sed sollicitudin, metus a tristique mollis, ipsum enim viverra dolor, porttitor porttitor leo urna a lectus. Vivamus ut dui eleifend, pulvinar mi sit amet, dapibus elit. Cum sociis natoque penatibus et magnis dis parturient viverra luctus nulla montes, nascetur ridiculus mus. Nam porta turpis est, non mollis lacus tincidunt a. Suspendisse ut felis congue, interdum nisl a, molestie nunc. Mauris porta dui ut lorem eleifend, ac aliquam dolor gravida. Curabitur luctus libero vel sem ullamcorper, a semper sem tincidunt. Nullam erat nisl, euismod sed dapibus id, facilisis ut arcu. In auctor adipiscing ullamcorper. Phasellus porta, purus ut condimentum ullamcorper, purus turpis interdum nisi, sit amet tempus massa orci quis massa. Integer non sem quis eros gravida volutpat nec eu mi. Integer ac elementum nibh.

Header.

ScrollIntent.js

Infinite Scrolling with a Footer Demo

Actions

Infinite Scrolling Demo: