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. uwsgi 安装配置

    安装uwsgi# pip install uwsgi 配置uwsgi:首先要明确的是,如果你喜欢用命令行的方式(如shell)敲命令,那可以省去任何配置.但是,绝大多数人,还是不愿意记那么长的命令,反 ...

  2. 一起来做chrome扩展《可配置的代理》

    一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...

  3. Source Insight 3.X 插件新loader发布

    [前言] 大约一年多没更新SI插件了,主要原因是我从SI换到了sublime,使用SI少了,插件也就停止更新了.不过看到园子里这么多网友的留言,觉得还是有必要更新一下,算是给还在用SI的朋友们一个交代 ...

  4. php数字索引数组去重及恢复索引

    $tmp = array('a','b','c','a'); $tmp = array_values(array_unique($tmp)); print_r($tmp);exit; //输出 Arr ...

  5. java 关键字查询时的转义操作

    /** * mysql模糊查询时,如果查询关键字本身包含_和%,需要转义 * * @param queryKey 查询关键字 * @return 转义字符 */ private String conv ...

  6. win7下开启telnet命令

    win7下开启telnet命令 win7上telnet这条命令默认被关闭了. 开启telnet方法如下: 一,打开控制面版 二,选择程序 三,选择打开或关闭windows功能 在弹出窗口中把 Teln ...

  7. isKindOfClass和isMemberOfClass的区别

    isKindOfClass和isMemberOfClass的区别 isKindOfClass和isMemberOfClass 都是NSObject的比较Class的方法 但两个有很大区别: isKin ...

  8. HBASE基础知识

    HBASE的集群的搭建HBASE的表设计HBASE的底层存储模型 HBase 是一个高可靠.高性能.面向列.可伸缩的分布式缓存系统.利用HBase 技术可在廉价PC Server上搭建起大规模结构化存 ...

  9. EXC_ARM_DA_ALIGN

    ios 版本上的问题  armv7  ipad2 int64 t = *(int64*)pBuff; 如果pBuff不是8字节对齐的地址就 crash 变通的方法是通过memcpy __sync_fe ...

  10. Selenium 功能总结大集合

    slenium自动化测试的一个利器: 总结了部分功能,成图,方便学习: 这是一张大图,大家看起来可能比较麻烦: 可以在我的github下载:selenium大图.xmind格式