Detect the position of a DOM element compared to the viewport during page scrolling.
npm install scrollo
Element is alive when a single part of it is visible on the viewport.
Element is active when it is completely in the viewport.
onFocus
is called during page scrolling. By default it is called only when element is alive – set persist
to true
in order to call it even when the element is out from the viewport.
status.isAlive
- true if it's alivestatus.aliveScroll
- alive scroll valuestatus.aliveProgress
- alive scroll value in percentagestatus.isActive
- true if it's activestatus.activeScroll
- active scroll valuestatus.activeProgress
- active scroll value in percentagestatus.outerScroll
- window scroll value
data.height
- element heightdata.offsetTop
- element top position relative to the documentdata.maxAliveScroll
- max alive scroll valuedata.maxActiveScroll
- max active scroll value
var myScrollo = new Scrollo(elm, {
persist: false,
autoStart: true,
onInitialize: (status, data, self) => {},
onBeforeUpdate: (status, data, self) => {},
onUpdate: (status, data, self) => {},
onEnter: (status, data, self) => {},
onActive: (status, data, self) => {},
onFocus: (status, data, self) => {},
onInactive: (status, data, self) => {},
onLeave: (status, data, self) => {}
});
// start watching
myScrollo.start();
// stop watching
myScrollo.stop();
// update data
myScrollo.update();