mousewheel滚轮事件
原生的滚轮事件:火狐与其他浏览器使用了不同的事件
/*
* 滚轮事件只有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滚轮事件的更多相关文章
- mousewheel滚轮事件 浏览器的写法
鼠标的滚轮事件,在Jquery中有对应的一个插件:https://github.com/brandonaaron/jquery-mousewheel 原生的滚轮事件:火狐与其他浏览器使用了不同的事件 ...
- 鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...
- 学习 JS滚轮事件(mousewheel/DOMMouseScroll)
学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异 IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...
- Winform 中panel的mousewheel鼠标滚轮事件触发
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现 滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...
- js 页面无滚动条添加滚轮事件
当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...
- javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...
- 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复
滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...
- js 滚轮事件 滚轮焦点图(轮播图)
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
随机推荐
- oracle中的针对该库的表
ALL_TAB_COLUMNS:所有用户的表字段 USER_TAB_COMMENTS:当前用户的所有表备注 USER_COL_COMMENTS:当前用户的所有列备注 USER_TAB_COLUMNS: ...
- Linux下搭建Lotus Domino集群
Linux下搭建Lotus Domino 集群 本文内容是Linux平台下Lotus Domino服务器部署案例(http://chenguang.blog.51cto.com/350944/1334 ...
- 《Ossim应用指南》入门篇
Ossim应用入门 --在<OSSIM在企业网络管理中的应用>http://chenguang.blog.51cto.com/350944/802007 这篇文章发布之后,很多同行对oss ...
- 使用.NET MVC框架项目开发流程(项目开发流程)
MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及 ...
- cordova ios --->OC 调用 js (一)
1.在HTML中定义一个函数如OCcallJS() function OCcallJS(){ alert("OC 调用js 的 方法"); } 2.当webview 加载完成的时候 ...
- hbase日常操作及维护
一,基本命令: 建表:create 'testtable','coulmn1','coulmn2' 也可以建表时加coulmn的属性如:create 'testtable',{NAME => ' ...
- LiveView 0.8 RC1 could boot evidence files acquired from Win10 64bit
The latest Windows 10 will be more and more popular in the very near future. Now let's take a look i ...
- Let's see if we could reocver Line 5.3 and above deleted chat messages or not
Forensic is a strict science and we should let the evidence speak for itself. Several months ago I s ...
- 现代福尔摩斯 - Oxygen Forensic Suite
各位可曾听说过智能手机取证软件Oxygen Forensic Suite,它的logo是名侦探福尔摩斯一手抽着他的招牌雪茄,一手拿着放大镜,全神贯注地正进行调查工作. 使用过它的取证人员必定会对它的提 ...
- Android IOS WebRTC 音视频开发总结(二十)-- 自由职业
咋看标题感觉与WebRTC和音视频无关,其实有着很大的关联,文章来自博客园RTC.Blacker,转载请说明出处. 背景: 一方面因为对开发人员比较了解,不喜欢约束,喜欢自由自在,所以我们向往自由职业 ...