Lightweight, fast, zero-dependency package which use IntersectionObserver to observe when an element intersect a (trigger) boundary line inside the viewport.
Make it easy to create scroll-driven interactions in the browser without performance overload.
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
npm install --save scrollzzz
const observe_box =;observe_box;
See online examples and inspect their index.html source code for more info.
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.
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).
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.
It works even if the browser is zoomed.
Inspired by scrollama.