提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS滚轮事件onmousewheel使用介绍

JS事件 使用 介绍 滚轮
2023-06-13 09:15:07 时间
典型的应用时鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到Mousewheel事件。在大多数浏览器（IE6,IE7,IE8,Opera10+,Safari5+）中，都提供了“mousewheel”事件。滚轮事件的兼容性差异有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是Firefox3.5+却不支持此事件，不过庆幸Firefox3.5+中提供了另外一个等同的事件：”DOMMouseScroll”，兼容代码如下：
复制代码代码如下:

//isFirefox是伪代码，大家可以自行实现
mousewheel=isFirefox?"DOMMouseScroll":"mousewheel";

“mousewheel”事件中的“event.wheelDelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为120的倍数，即：幅度大小=返回的值/120。
“DOMMouseScroll”事件中的“event.detail”属性值：返回的值，如果是负值说明滚轮是向上滚动（与“event.wheelDelta”正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为3的倍数，即：幅度大小=返回的值/3。
“mousewheel”事件在Opera10+中却是个特例，既有“event.wheelDelta”属性，也有“event.detail”属性。

相关文章