JS鼠标滚轮事件详解
2015-08-01 18:40
686 查看
[b]鼠标滚轮事件[/b]
IE、chrome监听的是wheelDelta,向下滚动其值为-120;向上滚动其值为120
FF监听的是detail,向下滚动其值为3;向上滚动其值为-3
jQuery写法
其他浏览器未测试
同类文章
/article/1256817.html
/article/5079437.html
//兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该方法 window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;//W3C //统一处理滚轮滚动事件 function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta,并且值为“正负120” delta = event.wheelDelta/120; if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理 } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3” delta = -event.detail/3; } if (delta) handle(delta); } //上下滚动时的具体处理函数 function handle(delta) { if (delta <0){//向下滚动 }else{//向上滚动 } }
IE、chrome监听的是wheelDelta,向下滚动其值为-120;向上滚动其值为120
FF监听的是detail,向下滚动其值为3;向上滚动其值为-3
jQuery写法
$(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e){ e.preventDefault(); var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail; var delta = Math.max(-1, Math.min(1, wheel) ); if(delta<0){//向下滚动 console.log('向下滚动'); }else{//向上滚动 console.log('向上滚动'); } }
其他浏览器未测试
同类文章
/article/1256817.html
/article/5079437.html
相关文章推荐
- ajax跨域访问-jsonp报错:Uncaught SyntaxError: Unexpected token":"or"<"or"{"
- js上传文件
- 用JavaScript验证表单
- JSON拾遗
- JSON的解析
- JavaScript学习要点(十三)
- js预加载/延迟加载
- 浅谈JavaScript中setInterval和setTimeout的使用问题
- 访问WEB-INF下的jsp页面以及利用session访问webroot下的页面
- HTML——JavaScript简介
- JavaScript读取并解析XML文件
- Jsoncpp使用详解以及链接问题解决
- Web列表分页--(单页web)容易上手的方法
- [LeetCode][JavaScript]Valid Anagram
- javascript 方法 / 绑定 解绑事件
- template.js插件--好用的模板插件
- webstrom 安装教程 配置js调试
- JS 解析JSON
- 第九天 JSON解析、集合
- JS JSON