Extra itty bitty scroll watcher.
$ npm install @hudsonfoo/skinnyscroll
or
$ yarn add @hudsonfoo/skinnyscroll
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.
<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
});
<!-- This will call your event 200 pixels after entering the screen from below -->
<div data-skinnyscroll='{ "name": "my-event-name", "distance": 200 }'></div>
const SkinnyScroll = require('@hudsonfoo/skinnyscroll');
function makeItSlide(element) {
// Turn off event listener
SkinnyScroll.off('my-event-name', makeItSlide);
// Do whatever you want
}
SkinnyScroll.on('my-event-name', makeItSlide);
const SkinnyScroll = require('@hudsonfoo/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);
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 |