@hudsonfoo/skinnyscroll v1.1.0

@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