FF使用DOMMouseScroll,其他浏览器使用mousewheel

FF在一个特殊的属性event.detail。表示滚动的值

event.detail
正数:向下滚动,负数:向上滚动
滚动一次值3,向上滚动一页值为-32768,向下滚动一页值为+32768。其它值代表滚动的行数, 方向代表了数值的正负号
受信任的事件是不会给detail赋值0

其它浏览器,通过event.wheelDelta获取滚动值
正数:向上滚动。负数:向下滚动
滚动一次值120

  1. //非FF
  2. //event.wheelDelta
  3. // 正数:向上滚动。负数:向下滚动
  4. // 滚动一次值120
  5. document.body.onmousewheel = function (event) {
  6. event = event || window.event;
  7. log('onmousewheel');
  8. log(event);
  9. log('event.detail=' + event.detail);//0
  10. log('event.wheelDelta=' + event.wheelDelta);
  11. };
  12. //FF
  13. // event.detail
  14. // 正数:向下滚动。负数:向上滚动
  15. // 向上滚动一页值为-32768,向下滚动一页值为+32768,其它值代表滚动的行数, 方向代表了数值的正负号
  16. // 受信任的事件是不会给detail赋值0
  17. document.body.addEventListener("DOMMouseScroll", function (event) {
  18. log('DOMMouseScroll');
  19. log(event);
  20. log(event.detail);
  21. });
  22. function log(arg) {
  23. window.console && window.console.log(arg);
  24. }

版权声明:本文博客原创文章,博客,未经同意,不得转载。

mousewheel 与 DOMMouseScroll的更多相关文章

  1. 鼠标滚轮(mousewheel)和DOMMouseScroll事件

    IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...

  2. javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件

    javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07   编辑:www.jquerycn.cn 本文学习下,javascript ...

  3. 鼠标滚轮事件MouseWheel

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

  4. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  5. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  6. JavaScript事件---事件绑定和深入

    发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容 事件绑定分为两种:一种是传统事件绑定(内联模型, ...

  7. 第二十二课:js事件原理以及addEvent.js的详解

    再看这篇博客之前,希望你已经对js高级程序编程一书中的事件模块进行了详读,不然我只能呵呵了. document.createEventObject,在IE下创建事件对象event. elem.fire ...

  8. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  9. JavaScript的事件绑定及深入

     事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一.传统事件绑定的问题传统事件绑定有内联模型 ...

随机推荐

  1. ASP.NET Core MVC Hello World

    ASP.NET Core 现在ASP.NET Core还在不断成长.更新中,说不定到了明天又换了个模样,就如同一个小孩,从蹒跚学步,到奔向未来. 所以我们可以相应的去理解更新中所发生的变化,包容它.呵 ...

  2. C#访问MySQL数据库(winform+EF)

    原文:C#访问MySQL数据库(winform+EF) 以前都是C#连接SQLServer,现在MySQL也比较火了,而且是开源跨平台的,这里连接使用一下,主要是体会一下整个流程,这里使用的是winf ...

  3. js控制图片缩放、水平和垂直方向居中对齐

    已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome. 这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快. 网上查了些资料,用css控制兼容性不好,看去非常揪心.于 ...

  4. Java 过滤器的作用

    Servlet API 非常久曾经就已成为企业应用开发的基石,而 Servlet 过滤器则是对 J2EE 家族的相对较新的补充.在 J2EE 探索者 系列文章的最后一篇中,作者 Kyle Gabhar ...

  5. 中文/英文双语言版本TWRP for Nexus5 -hammerheadcaf

    编译及作者:laser杨万荣 编译时间: 2015-05-17 编译目的:用于刷cm-12.0 和cm-12.1 ROM 因为现在Nexus5 最新的 CM是 hammerheadcaf ,即和 ao ...

  6. Oracle 11G CRUD操作监控单个表

    前言:    线上oracle数据库有张表的数据有些乱,依据应用db的log和应用的log也没有检查出来谁改动了.所以决定把这张单表做个具体的insert.update.delete监控.一:使用数据 ...

  7. Android使用的开发MediaRecorder录制声音

    至 Android 录制声音的应用,Android提供 MediaRecorder 类别.大约MediaRecorder可以参考一个特定的解释<Android开发之MediaRecorder类具 ...

  8. JAVA IP地址转成长整型方法

    JAVA IP地址转成长整型方法 代码例如以下: /** * IP转成整型 * @param ip * @return */ public static Long ip2int(String ip) ...

  9. Android开发框架SmartAndroid2.0 强劲框架

    SmartAndroid 是一个功能强劲的 Android 框架,作为一个简单而"优雅"的工具库包,它能够为 Android 开发人员建立功能完好的Android 应用程序. 经过 ...

  10. POJ 2586:Y2K Accounting Bug(贪心)

    Y2K Accounting Bug Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10024 Accepted: 4990 D ...