Sometimes, we want to normalize mouse wheel speed across browsers with JavaScript.
In this article, we’ll look at how to normalize mouse wheel speed across browsers with JavaScript.
How to normalize mouse wheel speed across browsers with JavaScript?
To normalize mouse wheel speed across browsers with JavaScript, we just assign -1 or 1 depending on the direction of the wheel scrolling.
For instance, we write
const handleScroll = (evt) => {
const direction = evt.detail < 0 || evt.wheelDelta > 0 ? 1 : -1;
};
someEl.addEventListener("mousewheel", handleScroll, false);
to add the handleScroll function that checks if evt.detail is less than 0 or evt.wheelDelta is bigger than 0 and return 1.
Otherwise, we return -1.
evt.detail < 0 || evt.wheelDelta > 0 being true means we’re scrolling up.
Otherwise, we’re scrolling down.
Conclusion
To normalize mouse wheel speed across browsers with JavaScript, we just assign -1 or 1 depending on the direction of the wheel scrolling.
