scroll wheel is zooming instead of scrolling

Var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))) Var e = window.event || e // old IE support In this case, we’re going to reverse Firefox’s detail value and return either 1 for up or -1 for down: Our MouseWheelHandler can now determine the wheel movement delta. The Cross-Browser mousewheel Event Handling Function Myimage.addEventListener('DOMMouseScroll', MouseWheelHandler, false) Įlse myimage.attachEvent('onmousewheel', MouseWheelHandler) Myimage.addEventListener('mousewheel', MouseWheelHandler, false) Var myimage = document.getElementById('myimage') We can now attach the mousewheel event handler: Let’s add an image to our web page which will zoom in and out in response to the mouse wheel: You should also note that Apple disable the scroll wheel in Safari, but support is available in the webkit engine so your code won’t cause any problems. So, until Mozilla adopt the event, we have a bizarre situation where it’s actually a little easier to code for IE6! That’s not something you hear said every day. This passes an event object with a detail property but, unlike wheelDelta, it returns a positive value for scrolling down. Mozilla has implemented a “DOMMouseScroll” event. Unfortunately, there’s one browser which doesn’t support the the “mousewheel” event. The larger or smaller the value, the bigger the movement. This exposes a wheelDelta property a positive value for scrolling up or a negative value for scolling down. You can register a handling function which is passed an event object.

Most browsers support the “mousewheel” event for any element. Rather than scrolling the page, you could perform a different action such as zooming in or out. Supporting the mouse wheel can add further interactivity to your HTML5 web pages.

Scroll wheel is zooming instead of scrolling