Get unlimited public & private packages + team-based management with npm Teams.Learn more »

scrollzzz

0.7.0 • Public • Published

scrollzzz

size-badge downloads-badge

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

<script src="https://unpkg.com/scrollzzz/dist/scrollzzz.iife.min.js"></script>

Quick start

const observe_box = scrollzzz({
  targets: '.box',
  trigger: 0.5,
  debug: true
});
 
observe_box
  .init()
  .observe(({ direction, position, entry }) => { ... });

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.

Install

npm i scrollzzz

DownloadsWeekly Downloads

15

Version

0.7.0

License

MIT

Unpacked Size

78.7 kB

Total Files

11

Last publish

Collaborators

  • avatar