原生的滚轮事件:火狐与其他浏览器使用了不同的事件

/*
* 滚轮事件只有firefox比较特殊,使用DOMMouseScroll; 其他浏览器使用mousewheel;
*
*/
// firefox
document.body.addEventListener("DOMMouseScroll", function(event) { var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
console.log(direction);
}); // chrome and ie
document.body.onmousewheel = function (event) {
event = event || window.event; var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
console.log(direction);
};

使用jquery兼容后的事件

// jquery 兼容的滚轮事件
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox if (delta > 0) {
// 向上滚
console.log("wheelup");
} else if (delta < 0) {
// 向下滚
console.log("wheeldown");
}
});

mousewheel滚轮事件的更多相关文章

  1. mousewheel滚轮事件 浏览器的写法

    鼠标的滚轮事件,在Jquery中有对应的一个插件:https://github.com/brandonaaron/jquery-mousewheel 原生的滚轮事件:火狐与其他浏览器使用了不同的事件 ...

  2. 鼠标滚轮事件MouseWheel

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

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

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

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

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

  5. Winform 中panel的mousewheel鼠标滚轮事件触发

    如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现 滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...

  6. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  7. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  8. 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

    滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...

  9. js 滚轮事件 滚轮焦点图(轮播图)

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

随机推荐

  1. jQuery中 wrap() wrapAll() 与 wrapInner()的区别

    今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是 ...

  2. Eclipse中Jsp页面警告的解决方法小结

    恩,只要是开发人员,这样的小事情总会遇到的,对于这其中的某些警告性的错误是不影响代码的运行的,对应的功能也是能实现的,不过总给人一种不太好看的感觉!如果代码写的比较符合规范,这些问题也就自然而然的消失 ...

  3. oracle 闪回技术

    oracle默认不启动闪回数据库 如果需要启动闪回数据库,数据库需要设置为归档模式,并启用恢复区. 1.查看是否启动闪回删除 SQL> show parameter recyclebin; NA ...

  4. WP8__从windowsphone app store 中根据app id获取应用的相关信息(下载网址及图片id等)

    windows phone 官网应用商店地址 http://www.windowsphone.com/zh-cn/store/featured-apps------------------------ ...

  5. Use BEC to do mobile phone forensics

    Belkasoft Evidence Center makes me very impressed that it supports lots of evidence type. I have to ...

  6. OpenStack实战(一)

    OpenStack作为当前发展势头迅猛的云计算开源项目,去年进行了一些了解,现在有空回来进行一些补充记录,当时实战的版本是那会最新版本,当然现在已经更新了好几版了,不过还是那句话“这些丝毫不影响,了解 ...

  7. c#文本文件写入

      string err = "Hellod world";             FileStream fs = null;             string filePa ...

  8. POJ C程序设计进阶 编程题#3:运算符判定

    编程题#3:运算符判定 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 两个 ...

  9. Linux搭建NFS提供磁盘给Windows使用

    在Windows2008系统下设置挂载Linux服务器磁盘 一.系统环境 系统平台:CentOS release 5.8 (Final) NFS Server IP:X....X...153.157 ...

  10. 日期转换(用DateTime的ParseExact方法解析特殊的日期时间)

    今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [07-13 15:50:42] 主要问题是这个时间不是标准的时间,而是自定义的格式,即开头是月-日,然后是时间. 使用最 ...