JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）
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>
JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）的更多相关文章
- 学习 JS滚轮事件(mousewheel/DOMMouseScroll)
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异 IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...
- 鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
- JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
- js鼠标滚轮事件兼容
JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- js鼠标滚轮事件
不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...
- js鼠标滚轮事件上滚下滚判断
onmousewheel <script> var scrollFunc = function (e){ //其实我一开始也不知道用啥 //console.log(e)我们可以打印一下 / ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
随机推荐
- HDU 3966 & POJ 3237 & HYSBZ 2243 树链剖分
树链剖分是一个很固定的套路 一般用来解决树上两点之间的路径更改与查询 思想是将一棵树分成不想交的几条链 并且由于dfs的顺序性 给每条链上的点或边标的号必定是连着的 那么每两个点之间的路径都可以拆成几 ...
- ComboSelect 下拉筛选
Jquery Combo Select下拉筛选 http://www.dowebok.com/179.html
- PHP中获取星期的几种方法
PHP中获取星期的几种方法 PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...
- Thinking in Java——笔记(15)
Generics The term "generic" means "pertaining or appropriate to large groups of class ...
- yii事件
控制器: public function actionTests1(){ $c = new \app\components\cat(); $m = new \app\components\mou; $ ...
- Swift利用协议优化NSNotificationCenter
NSNotificationCenter存在的问题 通知没有统一的命名格式 对于通知的命名没有强制的要求,一个项目里可能有多种不同的命名规则.比如: 1 2 3 4 5 6 class Barista ...
- MySql连接Visual studio Code First插件
到mySql官网Downloads==> MySQL on Windows==>MySQL for Visual Studio 下载插件安装即可
- java关键字之final
final表示不能修改. final修饰的方法不能被重写, final修饰的类不能被继承并且类里的所有方法都是final,成员变量可以是final或者不是final. final修饰的成员变量不可以改 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- mockjs模拟前后端交互
mockjs是用于mock数据(造假数据)的组件. mockjs官网链接为:http://mockjs.com/:mockjs官网有mockjs的源代码.API以及示例. mockjs拦截ajax请求 ...