Wheel Monitor

The Wheel Monitor is a TypeScript class that creates a visual representation of scroll activity for debugging purposes..

It provides an easy way to monitor and visualize wheel events on a webpage.

Installation

You can install the Wheel Monitor using your preferred package manager:

yarn add -D wheel-monitor

or

npm install --save-dev wheel-monitor

or

import { WheelMonitor } from 'https://esm.sh/wheel-monitor@latest';

Usage

To use the Wheel Monitor, you need to import the WheelMonitor class and create an instance:

import { WheelMonitor } from 'wheel-monitor';

// Create an instance of WheelMonitor with custom settings
const monitor = new WheelMonitor({
  axis: 'y',
  height: 100,
  width: 200,
  barColor '#0000cc',
  backgroundColor: '#fff',
  className: 'custom-classname'
});

// To destroy the monitor and remove event listeners and canvas
monitor.destroy();

Manual mode

Ability to programmatically trigger a wheel event. For example, if you handle events by yourself.

import { WheelMonitor } from 'wheel-monitor';

const monitor = new WheelMonitor({
  manual: true,
});

window.addEventListener('wheel', (e) => {
  monitor.trigger(e.deltaX);
});

Scale mode

You can enable scaling mode so that the values on the chart are scaled like on the demo.

import { WheelMonitor } from 'wheel-monitor';

const monitor = new WheelMonitor({
  scale: true,
});

Overriding styles

You can add custom className with desired styles.

NOTE: If a custom className is specified, the default styles will not be applied.

Example:

.wheel-monitor {
  position: absolute !important;
}

import { WheelMonitor } from 'wheel-monitor';

const monitor = new WheelMonitor({
  className: 'wheel-monitor',
});

Options

The WheelMonitorSettings interface provides several options to customize the appearance and behavior of the monitor:

Option	Description	Default Value
manual	manual mode flag	false
scale	scale mode flag	false
axis	Scroll axis	x or y
height	Canvas height	100
width	Canvas width	200
zIndex	Canvas z-index	999999
barColor	Chart bar color	#0000cc
className	Custom className

License

This project is licensed under the MIT License - see the LICENSE file for details.