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 ...
随机推荐
- windows server 2012 如何开启 hyper-v 并创建虚拟机
当我们拿到一台新的windows server 2012 服务器的时候,默认hyper-v是没有开启的,如果我们要在windows server上面创建虚拟机,那么我们也就需要开启hyper-v. 开 ...
- linux环境下编译C++ 程序
GCC(GNU Compiler Collection)是Linux下最主要的编译工具,GCC不仅功能非常强大,结构也异常灵活.它可以通过不同的前端模块来支持各种语言,如:Java.Fortran.P ...
- Go pprof和火焰图
Profiling 在计算机性能调试领域里,profiling 就是对应用的画像,这里画像就是应用使用 CPU 和内存的情况.也就是说应用使用了多少 CPU 资源?都是哪些部分在使用?每个函数使用的比 ...
- Chrome 谷歌如何快速实现跨域
第一步:在你的E盘或者其他盘新建一个文件夹,命名为:E:\MyChromeDevUserData 第二步:找到你的谷歌浏览器快捷图标,鼠标右键选择属性,出现以下界面: 第三步:在目标选项的最后添加: ...
- 《JavaScript权威指南(第6版)(中文版)》PDF
简介自1996年以来,JavaScript的:权威指南已为JavaScript圣经程序员,程序员指南和全面的参考,以核心语言和客户端JavaScript API的Web浏览器定义.第6版包括HTML5 ...
- CUBA 7 新特性 (下篇)
上篇我们主要介绍了 CUBA 7 中前端的一些主要功能.这篇我们介绍一下中间件的一变化和新特性. 中间件功能 前面关于新的界面 API 的描述内容比我预期的要多许多,所以在这一节,我会尽量简单点说! ...
- MYSQL安装时解决要输入current root password的解决方法
在装MYSQL的时候发现要输入current root password不记得以前在电脑里装过(你的系统曾经装过MYSQL在重装就会要求输入原来设定的密码,如果是第一次安装就不会出现),在网上苦苦搜寻 ...
- ObjectMapper将json转对象报错处理
在使用ObjectMapper将json转对象,调用mapper.readValue(jsonStr, XwjUser.class)时,报如下错: com.fasterxml.jackson.data ...
- CentOS如何挂载U盘(待更新)
使用Linux系统时,经常需要用到U盘,下面介绍以下如何再CentOS上挂载U盘. 首先,切换到root用户. 首先,切换到root用户. 首先,切换到root用户. 重要的事情说三遍,很多同学都说, ...
- winform绑定多张图片
开发winform程序的时候经常设计到要显示多张图片的问题,其解决思路一般是先遍历文件夹中的所有图片,然后再把这些图片添加到ImageList控件中,最后再绑定显示出来.这里我们介绍两种绑定的方法: ...