Skip to content

Wrapper for IntersectionObserver that returns the scroll direction

License

Notifications You must be signed in to change notification settings

caschbre/scroll-io

 
 

Repository files navigation

scroll-io

CircleCI

A small wrapper for IntersectionObserver that returns scroll information

npm i @imjasonmiller/scroll-io

Example

import { ScrollIO } from '@imjasonmiller/scroll-io';

// Cache '.child' elements of '.selection'
const children = document.querySelectorAll('.selection .child');

const callback = ({ index, enterDown, leaveUp }, entry) => {
    const ratio = entry.intersectionRatio;

    if (enterDown || leaveUp) {
        children[index].style.transform = `translateY(${50 * (1 - ratio)}%)`;
        children[index].style.opacity = ratio;
    }
};

const observer = new ScrollIO('.selection', callback, {
    range: { steps: 50 },
});

To apply a change in translateY and opacity based on how much of the image is visible, one can use the ratio. Whether the image enters the viewport from below or leaves it above is determined with enterDown and leaveUp respectively.

Syntax

const observer = new ScrollIO(selection,callback[, options]);

Parameters

selection

Default Type
null String | Element | NodeListOf<Element>

String expects a selection string, e.g. .selection or #selection.

callback

Default Type
null Function

Callback that is called on each intersection and receives the following arguments:

{
  index: number,
  enterUp: boolean,
  enterDown: boolean,
  leaveUp: boolean,
  leaveDown: boolean,
},
entry: IntersectionObserverEntry,

If needed, the index for each added Element allows you quick access, if cached outside of the handler, preventing unnecessary querySelector calls.

options

An optional object which accepts the following properties:

range

Default Type
{ min: 0, max: 1, steps: 0 } Object

A wide range of intersection thresholds can be generated by changing steps. Passing 4 will generate: [0, 0.25, 0.5, 0.75, 1.0], as each step will be (max - min) / steps = 0.25.

If you would like to limit the range, set min or/and max.

If you want to pass a single threshold value, you only have to pass min.

rootMargin

IntersectionObserver.rootMargin, which allows one to offset the bounding box.

Default Type
0px 0px 0px 0px string

namespace

Default Type
_scrollio String

Each Element passed to selection will have a property attached to it in order to store scroll related information. The default namespace can be changed if desired.

Methods

disconnect()

Stops the observer.

About

Wrapper for IntersectionObserver that returns the scroll direction

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 68.6%
  • HTML 15.9%
  • CSS 8.1%
  • JavaScript 7.4%