@hudsonfoo/skinnyscroll
Extra itty bitty scroll watcher.
Install
$ npm install @hudsonfoo/skinnyscroll
or
$ yarn @hudsonfoo/skinnyscroll
Usage
Use attribute data-skinnyscroll and pass options as JSON.
SkinnyScroll will query the DOM for nodes with that attribute after being loaded. You can re-query the DOM with the update method.
Basic usage
<div data-skinnyscroll='{ "name": "my-event-name" }'></div>const SkinnyScroll = require('@hudsonfoo/skinnyscroll');
SkinnyScroll.on('my-event-name', element => {
// Do whatever you want, but as an example:
element.addClass('slideInUp'); // animate.css
});With options
<!-- This will call your event 200 pixels after entering the screen from below -->
<div data-skinnyscroll='{ "name": "my-event-name", "distance": 200 }'></div>Fire only once
const SkinnyScroll = require('skinnyscroll');
function makeItSlide(element) {
// Turn off event listener
SkinnyScroll.off('my-event-name', makeItSlide);
// Do whatever you want
}
SkinnyScroll.on('my-event-name', makeItSlide);Fire and turn off for a short amount of time
const SkinnyScroll = require('skinnyscroll');
function makeItSlide(element) {
// Turn off event listener
SkinnyScroll.off('my-event-name', makeItSlide);
setTimeout(() => {
SkinnyScroll.on('my-event-name', makeItSlide);
}, 500);
// Do whatever you want
}
SkinnyScroll.on('my-event-name', makeItSlide);Methods list
| Method | Arguments | Description |
|---|---|---|
| on |
name {String}, callback {Function} |
Will fire callback when event is called |
| off |
name {String}, callback {Function} |
Turns off callback for this event |
| add | {HTMLNode} | Adds new HTML node to the watch list |
| update | {void} | Re-queries DOM for skinnyscroll nodes |