scroll-tracker v1.0.11
Scroll Tracker
A small library for tracking scroll position as a percentage.
/*
* Log to the console whenever the document.body element
* enters one of the defined percentages in `buckets`.
* Limit logging to happy once every 250ms.
*/
const scrollTracker = new ScrollTracker({
element: document.body,
buckets: [10,20,30,40,50,60,70,80,90,100],
callback: (buckets) => console.log(buckets),
delay: 250
});
/*
* Destroy the logging system which was previously set up.
*/
const scrollTracker.destroy();
Table of Contents
Requirements
Scroll Tracker is a CommonJS module and available on npm. To use within a browser, a bundling tool is required (Browserify/Webpack).
Usage
Scroll Tracker is easiest to use when installed with npm:
npm install scroll-tracker
Then you can load the module into your code with a require
call:
const ScrollTracker = require('scroll-tracker');
The ScrollTracker
variable is a constructor.
new ScrollTracker({ element: HTMLElement, buckets: Array[Number...], callback: Function (Array[Number...]), delay: Number})
Construct a new ScrollTracker instance.
element
is the element to track scroll percentage of (HTMLElement).buckets
is the set of scroll percentages to track (ArrayNumber...).callback
is the function to be called when page has scrolled into a bucket (Function (ArrayNumber...)).delay
is the amount of milliseconds to wait between calling the callback (Number).
Example
/*
* Log to the console whenever the document.body element
* enters one of the defined percentages in `buckets`.
* Limit logging to happy once every 250ms.
*/
const scrollTracker = new ScrollTracker({
element: document.body,
buckets: [10,20,30,40,50,60,70,80,90,100],
callback: (buckets) => console.log(buckets),
delay: 250
});
A ScrollTracker
instance has the following methods.
.destroy()
Destroy a ScrollTracker instance, removing all event listeners added during construction of the instance.
Example
/*
* Destroy the logging system which was previously set up.
*/
const scrollTracker.destroy();
Contributing
To contribute to Scroll Tracker, clone this repo locally and commit your code on a separate branch. Please write unit tests for your code, and run the linter before opening a pull-request:
npm test # run all unit tests
npm run lint # run the linter
License
Scroll Tracker is licensed under the MIT license.