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. 重新梳理HTML基础知识

    缘起 HTML(HyperText Markup Language超文本标记语言)是用于构建web页面的标记语言和通用标准.它并不是一项新的发明,因为超文本(具有超链接的文本)和标记语言(用于电子文档 ...

  2. cocos2dx中的ScrollView

    ScrollView由视窗区域(裁剪区域)和内容区域组成,内容区域叫innerContainer. 视窗区域范围:get/setContentSize 内容区域:get/setInnerContain ...

  3. GCC编译C代码

    C程序的编译过程       常用文件的后缀名: gcc编译c代码 1.gcc 常用编译选项: 2.gcc编译方法 testc.c: #include <stdio.h> int main ...

  4. wed应用程序开发原理

    ---恢复内容开始--- 企业应用演变的模式 1.主机/哑终端的集中计算模式 时间二十世纪七十年代,企业应用程序是围绕一个中心大型主机建立的.特点 大,贵,专用.只有输入输出功能,没有处理能力,全部是 ...

  5. Glide请求图片能携带Cookie的哟!

    在Web编程中我们都很熟知一个概念,当有了seesion登录状态时,你可以访问一些资源但如果你没有登录的话很多资源是无法访问的. 在android的WebApi中当然一样拥有这个概念.比如,用户的头像 ...

  6. C# 接口笔记

    /* 1. 实现多态的两种方式.             *    使用虚方法实现多态.             *    使用抽象方法实现多态.             *              ...

  7. visio任意角度精确旋转图形

    visio 2013 步骤: 选中图形 点击"视图->显示->任务窗格->大小和位置" 然后会出现一个小窗口,里面可以输入图形的旋转角度

  8. CentOS进不了mysql

    在tty1里输入命令:“mysql -uroot -p+密码” 可以正常进入mysql,但在tty2里就不行了, 提示:Error 1045(28000): Access denied for use ...

  9. Syntax highlighting in fenced code blocks

    Python @requires_authorization def somefunc(param1='', param2=0): r'''A docstring''' if param1 > ...

  10. AppSettings和connectionStrings的却别(转)

    AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...