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鼠标滚轮控制输入框取值中已使用 ...
随机推荐
- uwsgi 安装配置
安装uwsgi# pip install uwsgi 配置uwsgi:首先要明确的是,如果你喜欢用命令行的方式(如shell)敲命令,那可以省去任何配置.但是,绝大多数人,还是不愿意记那么长的命令,反 ...
- 一起来做chrome扩展《可配置的代理》
一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...
- Source Insight 3.X 插件新loader发布
[前言] 大约一年多没更新SI插件了,主要原因是我从SI换到了sublime,使用SI少了,插件也就停止更新了.不过看到园子里这么多网友的留言,觉得还是有必要更新一下,算是给还在用SI的朋友们一个交代 ...
- php数字索引数组去重及恢复索引
$tmp = array('a','b','c','a'); $tmp = array_values(array_unique($tmp)); print_r($tmp);exit; //输出 Arr ...
- java 关键字查询时的转义操作
/** * mysql模糊查询时,如果查询关键字本身包含_和%,需要转义 * * @param queryKey 查询关键字 * @return 转义字符 */ private String conv ...
- win7下开启telnet命令
win7下开启telnet命令 win7上telnet这条命令默认被关闭了. 开启telnet方法如下: 一,打开控制面版 二,选择程序 三,选择打开或关闭windows功能 在弹出窗口中把 Teln ...
- isKindOfClass和isMemberOfClass的区别
isKindOfClass和isMemberOfClass的区别 isKindOfClass和isMemberOfClass 都是NSObject的比较Class的方法 但两个有很大区别: isKin ...
- HBASE基础知识
HBASE的集群的搭建HBASE的表设计HBASE的底层存储模型 HBase 是一个高可靠.高性能.面向列.可伸缩的分布式缓存系统.利用HBase 技术可在廉价PC Server上搭建起大规模结构化存 ...
- EXC_ARM_DA_ALIGN
ios 版本上的问题 armv7 ipad2 int64 t = *(int64*)pBuff; 如果pBuff不是8字节对齐的地址就 crash 变通的方法是通过memcpy __sync_fe ...
- Selenium 功能总结大集合
slenium自动化测试的一个利器: 总结了部分功能,成图,方便学习: 这是一张大图,大家看起来可能比较麻烦: 可以在我的github下载:selenium大图.xmind格式