JS滚轮事件onmousewheel使用介绍

更新时间：2013年11月01日 17:20:41 作者：

鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件，感兴趣的朋友可以了解下

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

复制代码代码如下:

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

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

您可能感兴趣的文章:

微信小程序实战之打卡时钟的绘制
这篇文章主要介绍了如何利用微信小程序制作一个打卡时钟，分为工作和休息两种状态，用户可以设置相应的时间，所有的时钟记录都会被保存下来，感兴趣的可以了解一下
2022-04-04
小程序实现左滑删除的效果的实例代码
这篇文章主要介绍了小程序实现左滑删除的效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
BOM操作querySelector querySeletorAll获取标签对象
这篇文章主要为大家介绍了BOM操作querySelector querySeletorAll获取标签对象步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
JavaScript读二进制文件并用ajax传输二进制流的方法
这篇文章主要介绍了JavaScript读二进制文件并用ajax传输二进制流的方法的相关资料,需要的朋友可以参考下
2016-07-07
基于js判断浏览器是否支持webGL
这篇文章主要介绍了基于js判断浏览器是否支持webGL,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
VSCode 配置uni-app的方法
这篇文章主要介绍了VSCode 配置uni-app的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
小程序分页实践之编写可复用分页组件
这篇文章主要介绍了小程序分页实践之编写可复用分页组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
js中call()和apply()改变指针问题的讲解
今天小编就为大家分享一篇关于js中call()和apply()改变指针问题的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
JavaScript 面向对象基础简单示例
这篇文章主要介绍了JavaScript 面向对象基础,结合简单实例形式分析了JavaScript面向对象程序设计中类的定义、类方法与属性相关操作技巧,需要的朋友可以参考下
2019-10-10
Javascript学习笔记-详解in运算符
in运算符是javascript语言中比较特殊的一个，可以单独使用作为判断运算符，也常被用于for...in循环中遍历对象属性
2011-09-09