Skip to content
⚡️ 📜 A lightweight, blazing fast, rAF based, scroll watcher.
Branch: master
Clone or download
Latest commit d0fba5b Oct 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Update deps Jul 28, 2018
examples Update examples links Oct 1, 2018
src Update deps Jul 28, 2018
test Update deps Jul 28, 2018
.eslintrc.js Update deps Jul 28, 2018
.gitignore Fix a bunch of things Nov 27, 2017
.npmignore Fix a bunch of things Nov 27, 2017
.travis.yml Fix a bunch of things Nov 27, 2017
LICENSE.md Update License Dec 12, 2016
README.md Update CDN link Oct 1, 2018
package-lock.json Update deps Jul 28, 2018
package.json Release v1.2.0 Jul 28, 2018

README.md

scroll-watcher

build status npm version license dependency status devDependency status

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="https://cdn.jsdelivr.net/npm/scroll-watcher@latest/dist/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("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");
  })
  .on("exit", function(evt) {
    console.log("I'm out of viewport");
  });
Make some decision when page is loaded (or reloaded)
watcher.on("page:load", function(evt) {
  // maybe trigger a scroll?
  window.setTimeout(() => window.scrollBy(0, 1), 20);
});

Instance Methods

watch(target[, offset])

  • target - {String|Element} String or DOM node.
  • offset - {Number|Object|undefined} (optional) Element offset.
Returns:
  • Methods
    • on/once/off - common events
    • update - updates the location of the element in relation to the document
  • Properties
    • target - DOM node being watched

windowAtBottom([offset])

  • offset - {Number|undefined} (optional) How far to offset.

windowAtTop([offset])

  • offset - {Number|undefined} (optional) How far to offset.

Instance 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

MIT

You can’t perform that action at this time.