🎤 criss-cross
A simple and fast API to manage viewport and DOM elements intersections as you scroll.
Inspired by scrollmonitor from @stutrek and Kriss Kross
It uses Intersection Observer API, so make sure to add a polyfill.
Install
npm install criss-cross --save-dev
Usage
; const $el = document;const watcher = crissCross; watcher;
Examples
Coming soon…
API
create(target, [options])
Returns a watchItem
(see below)
target
Type: HTMLElement
string
The DOM element you are "listening to".
If a string is used, it should be a "documentQuerySelectorable" reference.
options
Type: Object
offset
Type: Number
Object
Default: 0
Refers to rootMargin property.
A number value sets equal top/bottom margins, in pixels.
Positive margins are added to the viewport bounding box, negative are removed.
top
Type: Number
Default: 0
bottom
Type: Number
Default: 0
for now, only the Y axis is supported…
root
Type: null
HTMLElement
Default: null
Refers to root property.
If the root
is null
, then the bounds of the actual document viewport are used.
Other values (HTMLElement) should be parent of target
.
destroy()
Kills everything…
update(watchItem, [options, force])
target
Type: Item
The watchItem you want to update the observer.
options
Type: Object
Same as create()
options parameter…
force
Type: Boolean
Default: false
Force was…
properties to be resetted to undefined
watchItem
Returned by crissCross.create()
.
Methods
init
destroy
pause
resume
lock
*unlock
*
(*) if a watchItem had to be "fixed" (like a sticky header or whatever), we need to "lock" its initial position.
lock()
creates a "ghost" element to keep control of the movements.
Events
Event callbacks receive a
watchItem
as parameter.
"Aliases":
enterViewport
fullyEnterViewport
exitViewport
fullyExitViewport
"Binders":
on
off
one
Properties
isInViewport
isFullyInViewport
isBeforeViewport
isAfterViewport
wasInViewport
wasFullyInViewport
wasBeforeViewport
wasAfterViewport
Extra
$el
: watched elementobserver
: IntersectionObserver instancemanager
: CrissCross instance