js滚轮事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)。w3c文档已经废弃了onmousewheel事件,建议使用onwheel鼠标事件。
该事件的浏览器支持是:

这样就不用再分浏览器绑定事件了,如果不用兼容太低的版本或者safari浏览器。
现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,其中负数表示为向上,正数表示为向下;wheelDelta只取±xxx(数值各个浏览器不定),其中负数表示为向下,正数数表示向上。
写一个函数判断鼠标上滚还是下滚:
function wheelUpDown (obj) {
obj.addEventListener("wheel",function (e) {
var wheelNum = e.wheelDelta || -e.deltaY; //我用的ff版本是61.0.1,e.delta在鼠标滚动不变化,为0,变化的是e.deltaY;
if(wheelNum > 0){
alert("鼠标上滚");
}
if(wheelNum < 0){
alert("鼠标下滚");
}
})
}
js滚轮事件的更多相关文章
- 学习 JS滚轮事件(mousewheel/DOMMouseScroll)
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异 IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...
- js 滚轮事件 滚轮焦点图(轮播图)
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
- JS滚轮事件onmousewheel
典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, S ...
- js滚轮事件需要注意的兼容性问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js滚轮事件兼容写法
/** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, ...
- JS滚轮事件封装
wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.ind ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- 两种js监听滚轮事件的方式
前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...
随机推荐
- 【数组】Remove Duplicates from Sorted Array II
题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...
- Windows里如何正确安装Zookeeper以服务运行(博主推荐)(图文详解)
不多说,直接上干货! 为什么要在Win下来安装Zookeeper呢? 其实玩过大数据的人很清楚,在Linux下我更不说了.在win下,如Disconf .Dubbo等应用. 所以,它的应用是非常广的. ...
- ES6-Object
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用sinopia搭建内部npm服务
sinopia搭建 这里默认你已经有node环境了,执行下面命令,全局安装 sinopia npm install -g sinopia 安装好后,执行下面命令启动 sinopia sinopia 你 ...
- 共识算法:Paxos
两阶段提交 Two-phase Commit(2PC):保证一个事务跨越多个节点时保持 ACID 特性: 两类节点:协调者(Coordinator)和参与者(Participants),协调者只有一个 ...
- java将System.out.println的输出导出到文件中
直接看代码 public static void saveStreamToFile(String savePath,String input){ try { //savePath like c:/lo ...
- 面试题30:KMP 字符串查找
参考:http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm.html自己写的很简单的K ...
- C++中虚函数的动态绑定和多态性
目录 静态类型 vs 动态类型.静态绑定 vs 动态绑定 虚函数动态绑定实现机制.虚析构函数 多态性 一.静态 vs 动态 静态类型 VS 动态类型.静态类型指的是对象声明的类型,在编译器确定的.动态 ...
- JDK 泛型
JDK1.5 令我们期待很久,可是当他发布的时候却更换版本号为5.0.这说明Java已经有大幅度的变化.本文将讲解JDK5.0支持的新功能-----Java的泛型. 1.Java泛型 其实Java的泛 ...
- Mybatis中同时使用shardbatis和pagehelper插件冲突问题
在一次使用mybatis的插件,分表shardbatis+分页pagehelper共同使用的时候,会抛出以下异常: java.lang.NoSuchMethodError: net.sf.jsqlpa ...