原生的滚轮事件:火狐与其他浏览器使用了不同的事件

/*
* 滚轮事件只有firefox比较特殊,使用DOMMouseScroll; 其他浏览器使用mousewheel;
*
*/
// firefox
document.body.addEventListener("DOMMouseScroll", function(event) { var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
console.log(direction);
}); // chrome and ie
document.body.onmousewheel = function (event) {
event = event || window.event; var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
console.log(direction);
};

使用jquery兼容后的事件

// jquery 兼容的滚轮事件
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox if (delta > 0) {
// 向上滚
console.log("wheelup");
} else if (delta < 0) {
// 向下滚
console.log("wheeldown");
}
});

mousewheel滚轮事件的更多相关文章

  1. mousewheel滚轮事件 浏览器的写法

    鼠标的滚轮事件,在Jquery中有对应的一个插件:https://github.com/brandonaaron/jquery-mousewheel 原生的滚轮事件:火狐与其他浏览器使用了不同的事件 ...

  2. 鼠标滚轮事件MouseWheel

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

  3. JS滚轮事件(mousewheel/DOMMouseScroll)了解

    已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...

  4. 学习 JS滚轮事件(mousewheel/DOMMouseScroll)

    学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...

  5. Winform 中panel的mousewheel鼠标滚轮事件触发

    如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现 滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...

  6. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  7. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  8. 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

    滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...

  9. js 滚轮事件 滚轮焦点图(轮播图)

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

随机推荐

  1. 学习练习 java 程序设计园的周长面积

    编写一个Java程序,计算半径为3.0的圆周长和面积并输出结果. 注:系统类Math位于java.lang包中,圆周率π可以由Math类的静态属性PI得到,其定义为“public static fin ...

  2. c#中如何做日期的三元判断(日期不为空赋值)

    <dx:ASPxDateEdit runat="server" ID="edTab4_protocoldate" Width="100%&quo ...

  3. PowerDesigner之PDM检查

    一.PDM检查 1.检查项的设置 PDM错误级别分为Error和Warning两种.Error是致命错,一旦发现这类错误,系统会自动CDM生成PDM或者OOM,Warning是警告错误,是系统认为不合 ...

  4. EPPB also support BlackBerry device

    各位看倌不是小弟要賣弄英文,實在是外國朋友希望知道上一篇"雲取證"中所用的工具Elcomsoft Phone Password Breaker支援黑莓機否?又要求非要看到截屏才算數 ...

  5. 003Linux网络配置

    基于VMware中的Linux系统: 1.VMware提供了三种网络工作模式: (1)bridged(桥接模式) 桥接模式,顾名思义,得有桥,谁充当桥呢?当然是主机,安装了虚拟机的主机,充当的是虚拟机 ...

  6. CuteFTP 9.0 上传文件时,中文文件名乱码

    解决办法如图: 1.右键--->属性 2.选项---->档案名称编  选择ascⅡ

  7. ASP.NET验证控件二

    RequiredFieldValidator 验证控件 页面布局: <div> <h1>RequiredFieldValidator 验证控件</h1>   用户名 ...

  8. Mysql 复制工具(percona-toolkit)

    Mysql 复制工具 1.percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检 ...

  9. 为什么swing不适合做桌面软件

    http://www.zhihu.com/question/19608871 我最近几年做的项目清一色的都是HTML5了,这篇<基于HTML5的电信网管3D机房监控应用>供参考,HTML5 ...

  10. c#使用NPOI导出Excel及往Excel里追加记录

    最近在做一个打印发票的程序,要求保存打印记录,所以用到了NPOI往Excel里导入数据,但是遇到了一些问题没法解决,最后看了别人的Java程序后才明白.下面只是说明几个问题,而不是怎样使用NPOI 问 ...