解析javascript中鼠标滚轮事件

更新时间：2015年05月26日 09:40:37 投稿：hebedich

这篇文章主要给大家详细介绍了javascript中鼠标滚轮事件，图文并茂，十分的详细，有需要的小伙伴可以参考下。

所有的现代浏览器都支持鼠标滚轮，并且在用户滚动滚轮时触发时间。浏览器通常使用鼠标滚轮滚动或缩放文档，但可以通过取消mousewheel事件来阻止这些默认操作。有一些互用性问题影响滚轮事件，但是编写跨平台的代码依旧可以行。除了Firefox之外的所有浏览器都支持“mousewheel”事件，但Firefox使用“DOMMouseScroll”,而3级DOM事件规范草案建议使用事件名“wheel”替代“mousewheel”。

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox不支持mousewheel

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

以下滚轮向下滚动是chrome和IE9下面控制台输出

以下是滚轮向下滚动Firefox下面控制台输出

从上面输出得出，可以使用非标准的DOMMouseScroll事件取代mousewheel，使用事件对象的detail属性取代wheelDetal。但是，detail属性值的缩放比率和正负符号不同于wheelDetal,detail值乘以-40和wheelDetal值相等。

在除了FireFox之外的浏览器下，滚动的上下滚动与否是下面这个wheelDelta有关。

根据测试，在我的win7系统下，无论IE7, IE10, Opera12,或者是safari5.1，每次往下滚动event.wheelDelta值都是-120.

对于FireFox浏览器（Opera浏览器也有），判断鼠标滚动方向的属性为event.detail, 向下滚动值为3.

需要注意的是，FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值，而其他浏览器是负值。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件，经过测试IE9还是不支持，但是谷歌和火狐都支持，在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

js实现点击切换卡片功能
这篇文章主要为大家详细介绍了js实现点击切换卡片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Jquery 切换不同图片示例代码
切换不同图片的方法有很多，在本文为大家介绍下使用jquery是如何做到的
2013-12-12
JS+CSS实现精美的二级导航效果代码
这篇文章主要介绍了JS+CSS实现精美的二级导航效果代码,涉及JavaScript基于鼠标事件动态变换元素样式的技巧,非常简单实用,需要的朋友可以参考下
2015-09-09
微信小程序完美解决scroll-view高度自适应问题的方法
这篇文章主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
document.compatMode介绍
对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。
2009-05-05
namespace.js Javascript的命名空间库
命名空间的好处已经耳熟能详，但是JS中并没有原生态支持命名空间，这个库就是为js提供命名空间的功能。
2011-10-10
layer扩展打开/关闭动画的方法
今天小编就为大家分享一篇layer扩展打开/关闭动画的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript常用的方法分享
本文给大家分享了几个javascript中常用的方法，十分的实用，也很简单，有需要的小伙伴可以参考下。
2015-07-07
用javascript实现模拟火焰
用javascript实现模拟火焰...
2007-10-10
Three.js入门之hello world以及如何绘制线
这篇文章主要给大家介绍了关于Three.js入门之hello world以及如何绘制线的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09

解析javascript中鼠标滚轮事件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具