Article introduction of Wulin.com (www.vevb.com): How does HTML5 use mouse wheel events?
Adding mouse wheel events to HTML5 web pages can better allow users to interact with web pages. In HTML5, the mouse scroll wheel not only can only slide up and down the web page. In fact, you can also rely on this to complete more functions, such as enlarging and reducing the field of view plane.
Most browsers support mouse wheel events, so you can subscribe to the mouse wheel event method first. Whenever the event is triggered, you can get a property called wheelDelta, which represents the size of the mouse wheel just changed. A positive value indicates that the scroll wheel slides down, and a negative value indicates that the scroll wheel slides up. The greater the absolute value of the value, the greater the sliding range.
Unfortunately, there is still a browser that does not support mouse wheel events. That's FireFox. Mozilla has implemented the processing of an event called DOMMouseScroll, which will pass an event parameter named event with a property called detail. However, this detail property is different from wheelDelta, which can only return positive values, that is, it can only insist on the value of the mouse wheel scrolling downward.
You should pay special attention that Apple also disabled mouse scrolling to control page sliding up and down in Safari browser, but this function is still used normally in the webkit engine, so the code you write will not trigger any problems.
Add mouse wheel event handling method
First, we add an image to the web page, and we can use the mouse wheel to control the zoom of this image later.
<img id=myimage src=myimage.jpg alt=my image />
Now add the mouse wheel event processing code
var myimage = document.getElementById(myimage);
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener(mousewheel, MouseWheelHandler, false);
// Firefox
myimage.addEventListener(DOMMouseScroll, MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent(onmousewheel, MouseWheelHandler);
Processing practices that can be supported by different browsers
In the following case, we will inverse the detail value of Firefox and return one of 1 or -1
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
Now we directly decide the size range of the picture. The following code sets the width range of the picture between 50-800 pixels
myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + px;
return false;
}
Last point, we return false in the method to terminate the standard mouse wheel event processing in case it slides up and down the web page.