Over a million developers have joined DZone.

Simple Mouse Wheel Support For GWT

DZone's Guide to

Simple Mouse Wheel Support For GWT

Free Resource
I was looking to a way to use the mouse wheel in my GWT app, but I didn´t find a straightforward way... so today I spend my morning learning JSNI and, with some piece of code I found on the Internet, I coded my own approach... Feel free to use anywere .. Hope that it might be useful for someone else too... 

public interface MouseWheelListener {
    public void onMouseWheelUp(int intensity);
    public void onMouseWheelDown(int intensity);

public class MouseWheel {
    private MouseWheel(Element e, MouseWheelListener listener) {
        attachMouseWheelListener(e, listener);
     * Sets a MouseWheelListener to a given Element
    public static void setMouseWheelListener(Element e, MouseWheelListener listener) {
        new MouseWheel(e, listener);
     * This method is used by FF
     * @param event
    private static native void dispatchMouseWheelEvent(JavaScriptObject event) /*-{
        @br.com.example.client.util.MouseWheel::dispatchMouseWheelEvent(Lcom/google/gwt/core/client/JavaScriptObject;Lbr/com/example/client/util/MouseWheelListener;)(event, this.__mousewheellistener);
     * This method is used by IE and FF
     * Part of this method was retrieved from http://adomas.org/notes/mouse-wheel.html
     * @param event
     * @param listener
    private static native void dispatchMouseWheelEvent(JavaScriptObject event, MouseWheelListener listener) /*-{

         if (!event) event = $wnd.event; // For IE

         var delta = 0;
         if (event.wheelDelta)             // IE case, delta is multiple of 120
              delta = event.wheelDelta / 120;
         else if (event.detail )            // Mozilla case
              delta = -event.detail / 3;   // different sign and multiple of 3
         if ( delta > 0 ) {
         } else {

         //taken from http://adomas.org/javascript-mouse-wheel/test2.html
         if (event.preventDefault)
         event.returnValue = false;

    private native void attachMouseWheelListener(Element e, MouseWheelListener listener) /*-{
        e.__mousewheellistener = listener;
        // for FF
        if (e.addEventListener) {
            e.addEventListener('DOMMouseScroll', @br.com.example.client.util.MouseWheel::dispatchMouseWheelEvent(Lcom/google/gwt/core/client/JavaScriptObject;), false);
        // for IE
        e.onmousewheel = function(event) {
            @br.com.example.client.util.MouseWheel::dispatchMouseWheelEvent (Lcom/google/gwt/core/client/JavaScriptObject;Lbr/com/example/client/util/MouseWheelListener;)(event, this.__mousewheellistener);

And here is how to use it:

        MouseWheel.setMouseWheelListener(RootPanel.get("slot2").getElement(), new MouseWheelListener() {

            public void onMouseWheelUp(int intensity) {
                Window.alert("up.. " + intensity);

            public void onMouseWheelDown(int intensity) {
                Window.alert("down..." + intensity);

Remember to replace my hardcoded package name (br.com.example) for your own... If you have any suggestion or critic, feel free to tell me... "tserafim" is my gmail username...

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}