scrollzzz
Lightweight, fast, zero-dependency package which use IntersectionObserver to observe when an element intersect a (trigger) boundary line inside the viewport.
Why
Make it easy to create scroll-driven interactions in the browser without performance overload.
Key features
You have access to:
- Scroll direction
- Element position relative to the trigger
- Percent of completion relative to the target top border
- The original IntersectionObserver entry
You can also:
- Unobserve targets
- Change IntersectionObserver.root
- Disconnect IntersectionObserver
And more.
Install
NPM
npm install --save scrollzzz
CDN
Quick start
const observe_box = ; observe_box ;
Examples
See online examples and inspect their index.html source code for more info.
API
Go to API page.
How it works
observe()
works as callback handler of IntersectionObserver, it fires on page load for all elements, then it fires only when element enter or exit the trigger line.
If progress===true
and an element intersect the trigger, a scroll event listener is added to keep track of progress
, when the element leave the trigger the event listener is removed. It make use of passive to improve performance.
When you use unobserve
option, scrollzzz will cache all targets that has been unobserved, if scrollzzz is re-initialize it'll not observe them again (see docs/unobserve example), you can also empty the cache if needed (read API for reference).
Browsers support
Tested in IE11 and in the latest version of Chrome, Firefox, Edge, Safari. For older browser make sure to add the official IntersectionObserver polyfill just before scrollzzz.
Notes
It works even if the browser is zoomed.
Inspired by scrollama.