What is normalize-wheel?
The normalize-wheel npm package is used to normalize the wheel event data across different browsers. This is particularly useful for handling mouse wheel events in a consistent manner, as different browsers can provide different values for the same event.
What are normalize-wheel's main functionalities?
Normalize Wheel Event Data
This feature allows you to normalize the wheel event data, making it consistent across different browsers. The code sample demonstrates how to use the normalizeWheel function to normalize the wheel event data and log the normalized pixel values for both the X and Y axes.
const normalizeWheel = require('normalize-wheel');
document.addEventListener('wheel', function(event) {
const normalized = normalizeWheel(event);
console.log(normalized.pixelY); // Normalized pixel value for the Y axis
console.log(normalized.pixelX); // Normalized pixel value for the X axis
});
Other packages similar to normalize-wheel
wheel
The 'wheel' package provides a similar functionality by normalizing wheel events across different browsers. It offers a more comprehensive API for handling various aspects of wheel events, including delta values and event types. Compared to normalize-wheel, it might offer more features but could be more complex to use.
dom-helpers
The 'dom-helpers' package includes a variety of DOM utility functions, including one for normalizing wheel events. While it is not solely focused on wheel event normalization, it provides a broader set of utilities for DOM manipulation. This makes it a more versatile but less specialized option compared to normalize-wheel.
Normalize Wheel
Mouse wheel normalization across multiple multiple browsers.
Original source
This code is extracted and from Facebook's Fixed Data Table. Apart from import fixes, the code is unmodified.
Usage
Just add it as an dependency in npm.
You can use it as follows:
import normalizeWheel from 'normalize-wheel';
document.addEventListener('mousewheel', function (event) {
const normalized = normalizeWheel(event);
console.log(normalized.pixelX, normalized.pixelY);
});
License
See the LICENSE
file.