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.