scroll-watcher

alt="npm version">


alt="license">


alt="dependency status">

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

A more up-to-date approach to this _scrolling watchers_ stuff. Slightly inspired by scrollMonitor.

$3

→ Scrolling, Moving and Recalculating

→ Static Website Menu

How to use it?

##### → CDN Hosted - jsDelivr

``HTML

`

##### → Self hosted

Download latest release.

##### → NPM

`shell
npm install scroll-watcher
`

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

`javascript
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)

`javascript
watcher.on("page:load", function(evt) {
// maybe trigger a scroll?
window.setTimeout(() => window.scrollBy(0, 1), 20);
});
`

Instance Methods

$3

- 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:

`javascript
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