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

/*
* 滚轮事件只有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. (原创)robotium自学笔记

    按计划6月份之后就要做安卓了,今天抽时间研究了下一款android自动化测试工具rebotium,记录下来备用. 个人感觉还是一个不错的工具. 首先确保已具备android相关环境并且已经创建了安卓模 ...

  2. SSH Secure Shell Client的傻瓜式使用方法

    说明:本记录仅是使用此软件的一种简单的操作方式,如果想深入研究,请做如下三件事: 1)到其官网了解她的前世今生 2)下载她.安装她.操作她(这一步需要不断的尝试.不断的深入.不断的探索,当然最好理论结 ...

  3. DownLoadFile - FileHandler

    C# 跳转新页面 判断URL文件是不是在于在. C# 指定物理目录下载文件,Response.End导致“正在中止线程”异常的问题 public class FileHandler { public ...

  4. com组件 Ieframe的主页锁定

    CLSID 里的ieframe的 shell OpenHomePage-> Command的默认项"C:\Program Files (x86)\Internet Explorer\i ...

  5. openstack4j接口调试

    //import java.util.List;////import org.openstack4j.api.OSClient.OSClientV3;//import org.openstack4j. ...

  6. Dynamics AX 4.0 多表looup

    project rar:http://files.cnblogs.com/files/sxypeace/PrivateProject_MutilTableLookupOnCtronl.rar 在AX ...

  7. IRS-P6数据介绍

    IRS-P6发射于2003年10月17日,星上携带三个传感器:多光谱传感器LISS4和LISS3,以及高级广角传感器AWIFS.LISS3传感器具有四个光谱波段分别位于可见光.近红外与短波红外区域,空 ...

  8. Objective-C中#define的常见用法

    参考博客 http://blog.csdn.net/kindazrael/article/details/8108868 在C语言中,预处理代码是非常强大的工具,能让代码变得可读性和可维护性更强.预处 ...

  9. Qt, 我回来了。。。

    说起qt,大学时就有接触,但一直没有深入,这个周六周天利用两于时间重新温习了一下,跟之前用过的vs上的MFC.C++ builder比起来,Qt封装很人性化,库也比较全,写个 一般的小工具很轻松. 参 ...

  10. Vim中的正则表达式[转]

    来自:http://blog.csdn.net/endall/archive/2007/08/29/1764554.aspx Vim中的正则表达式功能很强大,如果能自由运用,则可以完成很多难以想象的操 ...