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
• Usage
• Contributing
• License

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 (Array[Number...]).
• callback is the function to be called when page has scrolled into a bucket (Function (Array[Number...])).
• 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.