buschtoens/infinite

Scroll infinitely and get new content from a callback function

infinite

Scroll infinitely and get new content from a callback function

By default infinite listens on the scroll event. If the element has no scrollbars, infinite will run on each mousewheel event.

Installation

$ component install silvinci/infinite

Example

var infinite = require("infinite");

infinite(document.querySelector("ul"), function(iteration) {
  var self = this;
  request("/data?p=" + iteration, function(data) {
    var li = document.createElement("li")
      , text = document.createTextNode(data);
    li.appendChild(text);

    self.appendChild(li);
  });
});

API

Infinite(el, loadCallback, [margin])

Listen for scroll events on el. Call loadCallback, when the scrollbar of el hits the end. Optionally specify a margin so that loadCallback gets called before the scrollbar hits the end.

Infinite.onscroll()

Manually issue a scrollevent, triggering loadCallback, if the scrollbar is in the margin or at the end.

Infinite.on("load", function(iteration, delta) {});

Emitted each time the user scrolls inside the margin. The callback is called with this as el and the arguments iteration which counts how often the callback was called (starting at 0) and delta which returns the delta to the previous state (-1 or 1).

Infinite.pause()

Stop emitting load events.

Infinite.resume()

Resume emitting load events.

Infinite.bind(element)

Listen for events on the given element. Will unregister all events from an element that may have been registered previously.

Infinite.unbind()

Unbind from the event, virtually deconstructing this instance of Infinite.

License

MIT

infinite's Issues

is broken

Currently tried with my app, never fired.

> var el = document.getElementById('polls');
undefined
> [el.scrollHeight, el.scrollTop, el.clientHeight]
[321, 0, 321]

Unbind from the DOM

As per #2 it would be pretty useful to destroy an infinite instance once and for all, so that no unnecessary event listener is left on the DOMElement.

Probably infinite.unbind() is a good name. infinite.bind(el) should be added in as well. Just to be consistent.

Optionally use mousewheel event

As per #2 infinite doesn't work for non-overflowing elements. The user should have the ability to opt for the mousewheel event, so he may do things like caroussels, etc.