@hudsonfoo/skinnyscroll

1.1.0 • Public • Published

@hudsonfoo/skinnyscroll

npm (scoped) npm bundle size (minified)

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

Package Sidebar

Install

npm i @hudsonfoo/skinnyscroll

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

58.2 kB

Total Files

7

Last publish

Collaborators

  • hudsonfoo