A lightweight, blazing fast, rAF based, scroll watcher.
A more up-to-date approach to this scrolling watchers stuff. Slightly inspired by scrollMonitor.
→ Scrolling, Moving and Recalculating
→ CDN Hosted - jsDelivr
<script src="//cdn.jsdelivr.net/scroll-watcher/latest/scroll-watcher.min.js"></script>
Download latest release.
→ NPM
npm install scroll-watcher
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");
});
watcher.on('page:load', function(evt) {
// maybe trigger a scroll?
window.setTimeout(() => window.scrollBy(0, 1), 20);
});
target
-{String|Element}
String or DOM node.offset
-{Number|Object|undefined}
(optional) Element offset.
- Methods
on/once/off
- common eventsupdate
- updates the location of the element in relation to the document
- Properties
target
- DOM node being watched
offset
-{Number|undefined}
(optional) How far to offset.
offset
-{Number|undefined}
(optional) How far to offset.
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');
Thanks to @scottcorgan for his great tiny-emitter.