Developing for The Real Web - Mouse Wheel Programming

Friday, January 29, 2016

tl;dr**: Calculating mouse wheel value across browsers is a real pain in the ass. Avoid it as long as you can.

So nowadays there’s all these talks about React, Redux and so many other cool things to do. But usually at our day jobs,
we can’t just start using all these modern things. We have IE9 customers to think about and we have to make sure our
stuff won’t break for them, otherwise we’d be out of business.

Recently I’ve been given a task at work which involves mouse wheel/trackpad scrolling. I’d have to capture that event,
change it’s speed and velocity, and animate an element using that information.

I started developing this using Chrome on OS X, with Magic Mouse, and everything was smooth and easy. In it’s simplest
form:

This function tries to solve all issues I mentioned earlier and normalize the output. Then I could just use the output
and adjust the speed as needed. To solve the transform and translate3d issues I added prefixes: