Search code examples
javascriptscrollinternet-explorer-9mousewheelinternet-explorer-10

Detecting mousewheel on the x-axis (left and right) with Javascript


I know it's possible to detect up and down e.g.

    function handle(delta) {
    if (delta < 0) {
        alert('down');
} else {
    alert('up');
    }
}

function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
        delta = event.wheelDelta/120; 
    } else if (event.detail) {
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;​

But is there a way to detect if a user's mouse went left or right with the mousewheel?


Solution

    • The DOMMouseWheel event in Firefox has an axis property.

    • The mousewheel event in Chrome has wheelDeltaX and wheelDeltaY.

    • Sadly, I cannot find any equivalent propery for IE events (testing on IE9).