[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
先来看看各个浏览器的兼容情况
IE 6,7,8
注册事件使用 onmousewheel
取得滚动的值使用 event.wheelDelta
滚动步长 120
向下是负值，向上是正值
当鼠标在一个同一个坐标，并且滚轮不间断滚动时，wheelDelta会按步长递增
（比如 -240 -360 ）
Firefox 3.5
注册事件有两个MozMousePixelScroll,DOMMouseScroll,但是它们不能使用element.onDOMMouseScroll方式注册，必须使用addEventLinstener来监听事件
Firefox没有event.wheelDelta,它使用event.detail 来获取滚动的信息(Firefox这点做的很奇怪)
event.detail 本身是用来记录一个事件在原地(鼠标坐标不发生变化的情况下)执行了多少次的信息
而在DOMMouseScroll事件发生的时候，它的值通常是 3 和 -3
但是它的取值和IE正好相反, 向上是负,向下是正( 这个问题在代码中需要做统一 )
为什么说它的值通常是 3和-3呢，因为当你按住ctrl ,alt, shift 之后，再滑动鼠标滚轮，detail 的值就会成为 1和-1
而按住别的键，则正值有时还会变成6
总之在我看来是有点乱糟糟，
MozMousePixelScroll 据Mozilla说，是几乎跟DOMMouseScroll一样的事件，只不过更精确（到像素）
但是这个事件的detail值返回的非常奇怪，默认是51和-51,按住ctrl ,alt, shift 变成了 +- 17. @_@，所以它被华丽的无视了，我们不打算使用它
Chrome 和IE保持一致，但是它考虑到了横向鼠标滚轮设备的情况，所以增加了两个鼠标来分别获取值
事件 onmousewheel
wheelDelta {number}
wheelDeltaX {number}
wheelDeltaY {number}
这次 Opera 又是集大成者，既有detail 取值也一样是3,-3,又有wheelDelta,不过表现上倒是很一致
事件 onmousewheel
detail = {number}
wheelDelta = {number}
本来我们应该从Firefox支持的event.detail或者IE等支持的event.wheelDelta的取值中，选择一个，然后把另一个通过计算做成统一的，
但是实际上我们只能通过这些值知道 是向上滚 还是向下滚，
所以为了方便，我们两个都不取，通过计算把他们统一成 +1 和 -1.(这样做也是为了实际应用中的运算方便);
对于IE,Chrome来说，直接除以120就可以搞定
Opera 同时支持wheelDelta和detail ,但是detail没有wheelDelta同一位置递增的能力，所以
我们首先优先判断wheelDelta是否存在，如果存在，就使用wheelDelta,如果不存在再使用detail
由于firefox的键盘干扰，我们还需要对detail做一些过滤
首先用这个值跟3做取模运算 value % 3
说它是3的倍数，那么返回值是0，我们就用value除以3后返回( 保证返回的值是+1 -1 )
如果返回值不是0，那说明这个值不是1就是-1，那就直接返回这个值
最后，由于Firefox返回值的规则是向上是负 向下是正，与平时的习惯不同，我们要将正负反转过来，方法也很简单，计算结果前面加一个负号就可以搞定
话说回来，对滚轮事件的支持情况firefox真是有点闷.
好了，分析了一大堆，其实代码就几句:
复制代码 代码如下:
function getWheelValue( e )
{
e = e||event;
return ( e.wheelDelta ? e.wheelDelta/120 : -( e.detail%3 == 0 ? e.detail : e.detail/3 ) );
}
最后说说未来的滚轮事件和API
在DOM3 Event 中
滚轮事件变得更为复杂（也支持更多的东西）
注册的事件并没有变，依然叫mousewheel
专门增加了两枚滚轮事件对象
MouseWheelEvent
WheelEvents
而且支持了x,y,z三个轴向的滚轮值( 真复杂>_< )
感兴趣可以瞧瞧这里
http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents
标签：
js,事件对象,鼠标滚轮
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“js 事件对象 鼠标滚轮效果演示说明”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。