intersection-observer-js v0.1.2
intersection-observer-js
Plain vanilla JS IntersectionObserver utility, to be used as a mixin.
Installation
$ npm install intersection-observer-js
Basic Usage
You just need to import the utility and then instantiate it with an object:
import inViewport from 'intersection-observer-js';
const sections = document.querySelectorAll(".section");
inViewport({
$elements: sections,
});
A more complex example would be using special callback and data attribute (see below for API):
import inViewport from 'intersection-observer-js';
const sections = document.querySelectorAll(".section");
inViewport({
$elements: sections,
inCallback: (entry) => {
console.log('intersection crossed at', entry.intersectionRatio);
},
dataPos: 'data-intersection-state',
});
Attributes
Object being passed to inViewport
has the following attributes.
### $elements
A Nodelist of elements must be provided. These are the elements being observed.
@type {Nodelist}
@required
### observerOptions
The options object passed into the IntersectionObserver() constructor, as per API definition. If not specified it takes the defaults.
@type {Object}
startCallback
Optional callback to be run at the startHook
(beginning of an intersection change).
@type {Function}
inCallback
Optional callback to be run at the inHook
(intersection entry).
@type {Function}
outCallback
Optional callback to be run at the outHook
(intersection exit).
@type {Function}
endCallback
Optional callback to be run at the endHook
(end of an intersection change).
@type {Function}
dataPos
Optional string being used to store the position changes.
@type {String}
@default 'data-in-viewport-position'
txtInter
Optional string being used as the position value when entry.isIntersecting
.
@type {String}
@default 'intersecting'
txtAbove
Optional string being used as the position value when element being observed is above the definded intersection.
@type {String}
@default 'above'
txtBelow
Optional string being used as the position value when element being observed is below the definded intersection.
@type {String}
@default 'below'
dataDir
Optional string being used to store the direction changes.
@type {String}
@default 'data-in-viewport-direction'
Please note this data attribute is only being set when entry.isIntersecting
, and value is built prepending from-
string to either txtAbove
or txtBelow
.
Events execution order
The order of execution of default and hooked events is as follows:
startHook
- Internal update of direction data attribute
- Internal update of position data attribute
inHook
/outHook
endHook
License
MIT