storm-scroll-points
v1.1.3
Published
Trigger className changes and callbacks when an element scrolls into view
Downloads
26
Readme
Storm Scroll Points
Trigger className changes and callbacks when an element scrolls into view. Use with care to avoid jank.
Example
https://stormid.github.io/storm-scroll-points
Usage
HTML
<div class="js-scroll-point"></div>
JS
npm i -S storm-scroll-points
either using es6 import
import ScrollPoints from 'storm-scroll-points';
ScrollPoints.init('.js-scroll-point');
aynchronous browser loading (use the .standalone version in the /dist folder)
import Load from 'storm-load';
Load('/content/js/async/storm-scroll-point.standalone.js')
.then(() => {
StormScrollPoints.init('.js-scroll-point');
});
Options
{
offset: 0,
callback: false,
throttle: 60,
className: 'is-scrolled-in',
unload: true //only trigger once, to unload the scroll listener
}
e.g.
ScrollPoints.init('.js-scroll-point', {
callback(){
console.info('Scrolled into view');
}
});
Tests
npm run test
Browser support
This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.
This module depends upon Object.assign available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.
Dependencies
None external.
Imports raf-throttle.
License
MIT