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鼠标滚轮控制输入框取值中已使用 ...
随机推荐
- 重新梳理HTML基础知识
缘起 HTML(HyperText Markup Language超文本标记语言)是用于构建web页面的标记语言和通用标准.它并不是一项新的发明,因为超文本(具有超链接的文本)和标记语言(用于电子文档 ...
- cocos2dx中的ScrollView
ScrollView由视窗区域(裁剪区域)和内容区域组成,内容区域叫innerContainer. 视窗区域范围:get/setContentSize 内容区域:get/setInnerContain ...
- GCC编译C代码
C程序的编译过程 常用文件的后缀名: gcc编译c代码 1.gcc 常用编译选项: 2.gcc编译方法 testc.c: #include <stdio.h> int main ...
- wed应用程序开发原理
---恢复内容开始--- 企业应用演变的模式 1.主机/哑终端的集中计算模式 时间二十世纪七十年代,企业应用程序是围绕一个中心大型主机建立的.特点 大,贵,专用.只有输入输出功能,没有处理能力,全部是 ...
- Glide请求图片能携带Cookie的哟！
在Web编程中我们都很熟知一个概念,当有了seesion登录状态时,你可以访问一些资源但如果你没有登录的话很多资源是无法访问的. 在android的WebApi中当然一样拥有这个概念.比如,用户的头像 ...
- C# 接口笔记
/* 1. 实现多态的两种方式. * 使用虚方法实现多态. * 使用抽象方法实现多态. * ...
- visio任意角度精确旋转图形
visio 2013 步骤: 选中图形 点击"视图->显示->任务窗格->大小和位置" 然后会出现一个小窗口,里面可以输入图形的旋转角度
- CentOS进不了mysql
在tty1里输入命令:“mysql -uroot -p+密码” 可以正常进入mysql,但在tty2里就不行了, 提示:Error 1045(28000): Access denied for use ...
- Syntax highlighting in fenced code blocks
Python @requires_authorization def somefunc(param1='', param2=0): r'''A docstring''' if param1 > ...
- AppSettings和connectionStrings的却别（转）
AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...