scroll-watcher

2.2.0 • Public • Published

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");

License

MIT

Package Sidebar

Install

npm i scroll-watcher

Weekly Downloads

48

Version

2.2.0

License

MIT

Unpacked Size

26.5 kB

Total Files

5

Last publish

Collaborators

  • jonataswalker