Brandon Aaron

jQuery Mouse Wheel Plugin Demos

Use your mouse wheel over the box below. It will report your direction and velocity.

There are two ways you can use the mousewheel event. You can use the mousewheel and unmousewheel helpers or just use the typical bind and unbind syntax.

$('div.mousewheel_example').mousewheel(fn);
$('div.mousewheel_example').bind('mousewheel', fn);

The handler for the mousewheel event is a little different than others because it gets a second argument called, delta. This argument represents the direct and velocity of the mouse wheel. If the number is negative the mouse wheel is moving down and up if it is positive.

Here is the code that is used for this demo.

jQuery(function($) {
    $('div.mousewheel_example')
        .bind('mousewheel', function(event, delta) {
            var dir = delta > 0 ? 'Up' : 'Down',
                vel = Math.abs(delta);
            $(this).text(dir + ' at a velocity of ' + vel);
            return false;
        });
});