Handle mouse wheel event with jQuery jMouseWheel plugin

get.php26

Recently, when answer this question on stackoverflow, I found that old way of cross-platform mouse wheel event detection have failed on new version of Firefox and Chrome. After some study on MDN, I have begun to write a new jQuery plugin to support the mouse wheel event call jMouseWheel. You can get the full source code on GitHub.

Why this plugin is created?

Well, jQuery support a event call scroll. However, it is only fired when a element have a scroll bar and the scrolling of the user make its content moved. If you want to detect just the mouse wheel event on an element, you may need another plugin like jMouseWheel.

Installation

First of all, jMouseWheel is just a plugin of jQuery and you need to include jQuery library to your HTMl first:

<script src="https://code.jquery.com/jquery-1.9.0.min.js">

Next, download the zipped file of my project and use the jMouseWheel-.min.js in your HTML:

<script src="path/to/jMouseWheel-<verion>.min.js">

Usage

Simply call the $.mousewheel(handler) in your desired element like this: 

$(document).ready(function(){
    $('#your-div').mousewheel(function(evt){
       console.log(evt.deltaY);
    });
});

For more details of the `evt` event, read the documentation from Mozilla developer network.

Current status

By the time I wrote this introduction, my plugin just allows binding to the mouse wheel event and does not support unbinding from it. I’m working to improve this plugin and make it support fully jQuery event API with on, bind and unbind method.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *