Advanced Is In Viewport Checker Library – wiscroll

Preview:

Description:

wiscroll is a tiny yet powerful ‘Is In Viewport’ checker that detects if an element enters or exits the viewport and triggers certain actions based on the scroll position.

A typical use of this library is to animate an element when you scroll down or up the webpage.

Works with all modern browsers that support the IntersectionObserver API.

How to use it:

1. Install and import the wiscroll library.

# NPM
$ npm install wiscroll --save

import Wiscroll from 'wiscroll';

2. Or load the compiled JavaScript file in the document.

<script src="./dist/wiscroll.js"></script>

3. Initialize the wiscroll library and specify the target element & root element (OPTIONAL viewport).

const el = document.querySelector('.wiscroll');
new Wiscroll(el);

4. Applies a CSS class to the target element when its top border passes root’s borders (80% from the top in this instance).

new Wiscroll(el)
.on(
    '50% top',//50%, 50px, -50%, -50px ...
    'animation', // class or space separated classes
    true // add class(es) when target border is (true: lower; false: higher), otherwise remove class(es), optional, default is true
);

5. Or perform callback functions as follows.

new Wiscroll(el)
.on(
    '90% top',
    function(entry) {
        console.log('Target border is higher');
    },
    function(entry) {
        console.log('Target border is lower');
    }
);

6. Perform callback functions when the element goes out from the viewport. All possible directions:

• in: scrolled into the viewport
• out: scrolled out from the viewport
• down: the element is going down
• up: the element is going up

new Wiscroll(el)
.on(
    '50% bottom out',
    function(entry) {
      // do something
    }
);

7. Do something when the position changes.

new Wiscroll(el).fromto(
  '-0% top',
  '0% bottom',
  function(position, entry) {
    // position is from 0 to 1, it could be negative or greater than 1 if it's out of boundary
    console.log(position);
  },
  {
    init: function(position, entry) {
      console.log('Init:' + position);
    },
    in: function(position, entry) {
      console.log('In:' + position);
    },
    // note that because of throttling, out function could be executed before the last scroll function call
    out: function(position, entry) {
      console.log('Out:' + position);
    },
    delay: 150, // throttle delay
    fromIsBelowTo: true
  }
);