onmousewheel （FireFox不支持此事件）

 // IE/Opera/Chrome/Safari

 document.body.onmousewheel = function(event) {

     event = event || window.event;

     console.dir(event);

 };

DOMMouseScroll（FireFox独有事件）

 // Firefox

 document.body.addEventListener("DOMMouseScroll", function(event) {

     console.dir(event);

 });

js返回数值判断滚轮上下

  • Firefox 使用detail，只取 ±3．
  • 五大浏览器（IE、Opera、Safari、Firefox、Chrome）使用wheelDelta，只取 ±120．
  • 其中正数表示为向上，负数表示向下．

Example

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <title>Test wheel event</title>

     </head>

     <body style="height:2000px;">

         <script type="text/javascript">

             var scrollFunc = function(event){

                 event = event || window.event;

                 if(event.wheelDelta){ // IE/Opera/Chrome/Safari

                     t1 = event.wheelDelta;

                     console.log(t1);

                 }else if(event.detail){ // Firefox

                     t2 = event.detail;

                     console.log(t2);

                 }

             }

             /*注册事件*/

             if(document.addEventListener){

                 // firefox

                 document.body.addEventListener("DOMMouseScroll",scrollFunc,false);

             }

             document.body.onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari

         </script>

     </body>

 </html>

SEE ALSO

JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）的更多相关文章

  1. 学习 JS滚轮事件(mousewheel/DOMMouseScroll)

    学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...

  2. JS滚轮事件(mousewheel/DOMMouseScroll)了解

    已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...

  3. 鼠标滚轮事件MouseWheel

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

  4. JS鼠标滚轮事件详解

    鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

  5. js鼠标滚轮事件兼容

    JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...

  6. JS鼠标滚轮事件解析

    一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...

  7. js鼠标滚轮事件

    不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...

  8. js鼠标滚轮事件上滚下滚判断

    onmousewheel <script> var scrollFunc = function (e){ //其实我一开始也不知道用啥 //console.log(e)我们可以打印一下 / ...

  9. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

随机推荐

  1. 开源战棋 SLG 游戏框架设计思考（二）规则系统要考虑的因素

    游戏对象 1. 地块方格 地形:山脉.丘陵.乔木林.灌木林.平原.河流.湖泊.海洋.雪原.沼泽.沙漠.暗礁.滩涂.岛屿等等(需完善) 设施:铁路.公路.桥梁.机场.城市.村庄.岸防炮.要塞.废墟等等( ...

  2. MongoDB的配置、启动、关闭

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  3. 网页语言有html，php.jsp，无论什么语言浏览器总是能正常显示，这个解析工作是浏览器完成的吗？

    不是,浏览器最基本的语言是html也就是说浏览器只看得懂html.css.js等其他的服务器端动态脚本,比如你说的php.jsp等,解析工作是在服务器完成的!打个比方,你在电脑显示屏上看到的一切东西, ...

  4. vert.x学习（七），使用表单获取用户提交的数据

    在web开发中,用的最多的就是表单了,用户通过表单提交数据到系统后台,系统又可以通过表单传递的数据做业务分析.那么这章就学习在vert.x中怎么使用表单,获取表单的参数值. 编写一个表单模板代码res ...

  5. [功能改进]Live Writer发博支持“建分类、加标签、写摘要”

    以前您在园子里用Windows Live Wirter发布博文是不是有以下三个不爽: 不爽1:如果想在发布随笔时新建分类并将随笔添加至该分类,需要先在博客后台添加分类,然后在Live Writer中刷 ...

  6. SVG知识难点

      参考资料:http://www.w3cplus.com/css3/clip.html   1.clip:默认值是auto,为不裁剪 <img border="0" src ...

  7. windows远程控制ubuntu---基于ssh

    要实现windows下连接ubuntu需要安装以下软件: 1. windows下安装winSCP 2. Ubuntu下安装OpenSSH Server 可以使用命令行安装openSSH Server: ...

  8. cocos2dx 入门

    1.设置环境变量 JAVA_HOME=C:\Program Files\Java\jdk1.7.0_17CLASSPATH=.;%JAVA_HOME%\lib;Path增加%JAVA_HOME%\bi ...

  9. CAS学习笔记（一）

    近期做单点登录,看了一些CAS资料,做下总结 一.cas简介 全名:Central Authentication Service 特点: 1.开源的.多协议的 SSO 解决方案: Protocols  ...

  10. 把汉字转换为html实体编码

    背景:工作中需要把汉字转换为html实体编码实现方式:import org.apache.commons.lang.StringEscapeUtils;public static void main( ...