scroll-watcher

scroll-watcher

A lightweight, blazing fast, rAF based, scroll watcher.

A more up-to-date approach to this scrolling watchers stuff. Slightly inspired by scrollMonitor.

Demos

→ Scrolling, Moving and Recalculating

→ Static Website Menu

How to use it?

→ CDN Hosted - jsDelivr

<script src="//cdn.jsdelivr.net/scroll-watcher/latest/scroll-watcher.min.js"></script>

→ Self hosted

Download latest release.

→ NPM

npm install scroll-watcher

Instantiate and watch for a specific (or a list) DOM element

var scroll = new ScrollWatcher();
scroll.watch('my-element')
  .on('enter', function (evt) {
    console.log('I'm partially inside viewport');
  })
  .on('exit', function (evt) {
    console.log('I'm out of viewport');
  })
  .on('enter:full', function (evt) {
    console.log('I'm entirely within the viewport');
  })
  .on('exit:partial', function (evt) {
    console.log('I'm partially out of viewport');
  });

Events on/once/off

You can simply watch for scrolling action:

var watcher = new ScrollWatcher();
watcher.on('scrolling', function(evt) {
  console.log(evt);
});

// or just once
watcher.once('scrolling', function(evt) {
  console.log(evt);
});

// and turn it off (later)
watcher.off('scrolling');

Credits

Thanks to @scottcorgan for his great tiny-emitter.

License

Unlicense