https://github.com/rkrupinski/vspy

A simple viewport spy.
https://github.com/rkrupinski/vspy

Last synced: about 1 month ago
JSON representation

A simple viewport spy.

• Host: GitHub
• URL: https://github.com/rkrupinski/vspy
• Owner: rkrupinski
• Created: 2014-05-25T20:35:22.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-13T18:24:35.000Z (over 10 years ago)
• Last Synced: 2024-08-09T09:29:32.194Z (5 months ago)
• Language: JavaScript
• Size: 418 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
vspy

====

A simple viewport spy.

[![Build Status](https://travis-ci.org/rkrupinski/vspy.png)](https://travis-ci.org/rkrupinski/vspy)

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:

```js

var spy = require('vspy')(callback);

function callback(el) {

  console.log(el.nodeName + ' reached the viewport!');

}

spy.observe('.foo');

```

Other examples:

- [lazyload](http://rkrupinski.github.io/vspy/demo/lazyload)

- [multiple](http://rkrupinski.github.io/vspy/demo/multiple)

Installation

------------

```bash

$ npm install vspy

```

Test

----

```bash

$ npm test

```

Browser support

---------------

IE9+