vspy

A simple viewport spy.

Usage

Factory - accepts 2 parameters:

• callback (required) - function called once for each element, right after it reaches the viewport. It is passed a reference to element as a parameter. Once it's called, the element gets marked as handled and removed from the pool.
• options (optional) - available configuration options include:
  • offset - custom scroll offset (vertical; default: 0)
  • container - container to listen for scroll events on (default: window)

API:

• .observe(target) - adds elements to the pool. Duplicates and previously handled elements are removed. It accepts either a CSS selector or instances of Element, NodeList and Array as a parameter.
• .poke() - triggers targets check
• .prune() - a target can be detached at any time, successfully preventing the onscroll callback from being deregistered. Use this method to notify the instance, that the DOM structure has changed. It accepts no parameters.
• .reset(target) - marks target as unhandled in the context of the current spy.

Example

Simple spy:

var spy = require('vspy')(callback);
 
function callback(el) {
  console.log(el.nodeName + ' reached the viewport!');
}
 
spy.observe('.foo');

Other examples:

• lazyload
• multiple

Installation

$ npm install vspy

Test

$ npm test

Browser support

IE9+