A few days ago I noticed that the scroll wheel of my mouse stopped working properly. While being rotated in one direction, it sometimes generates events as if it were scrolled in the opposite one. This results in a jerking motion which makes it very inconvenient to browse any lengthy text, not to mention playing games.

Trying to investigate the issue, I looked for a tool to inspect the scroll events as they are spawned and spot any anomalies. In fact, since I wasn’t going to install random apps into my system, I was looking for web pages only. For some reason, I couldn’t find one, so I decided to write my own.

The programming language Processing (Wikipedia) proved to be the right tool for the job. Its standard library, designed for interactive 2D graphics, allowed me to create a very simple (55 lines long) program.

Try it yourself. Hover your mouse pointer over the canvas and scroll in one direction as fast as you can. The program will draw a colored streamer moving to the right and also in the direction you’re scrolling. As long as you don’t change scrolling direction, the streamer should stay the same color. If you see spots of a different color, it means that your mouse wheel is glitchy too.

Having written the program to run in the Processing sketchbook, I decided to share it by publishing it here. I was spared the need to port my code to Javascript, thanks to an awesome library called Processing.js (Wikipedia). It is an implementation of Processing in Javascript, which can draw a sketch inside a HTML canvas. So I created a basic HTML page and linked my code along with the library. But not everything worked right away — hardly a surprise when it comes to web page development.

It turns out that Processing.js version 1.4.8 does not handle mouse scroll events. I guess this is caused by the sad fact that every browser handles them in a different way. Fortunately, Processing.js allows calling Processing functions from the Javascript code. This means that a custom event handler can solve the issue.

I came across an implementation which is claimed to work in most new browsers. After some tweaks, I managed to fit it to my needs. The scroll event handler turned out to be more complex than the original program itself, mostly due to quirks of different browsers. Good thing I don’t have to program webpages for a living!