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 ...
随机推荐
- [linux]查看文件编码和编码转换
方法一:file filename 方法二:在Vim中可以直接查看文件编码 :set fileencoding 即可显示文件编码格式. 如果你只是想查看其它编码格式的文件或者想解决用Vim查看文件乱码 ...
- eclipse+maven+jetty环境下修改了文件需要重启才能修改成功
遇到这种情况,需要在类库文件夹中修改配置文件(C:\.m2\repository\org\mortbay\jetty\jetty\6.1.22) 在以上路径下添加如下路径的压缩文件中的两个文件即可 路 ...
- java基础回顾(三)——HashMap与HashTable
public class Hashtable extends Dictionary implements Map, Cloneable, java.io.Serializable public cla ...
- 【HTML/XML 11】XML和HTML的混合使用
导读:在前面介绍了很多关于XML和HTML的东西,他们其实各有各的好处,在很多时候都需要结合起来使用.现在已经有XML和HTML结合的产物:XHTML(可扩展超文本标记语言).在本篇博客中,则主要介绍 ...
- 安全终止MFC线程
终止线程 有两种情况可以使线程结束:控制函数结束或者根本就不允许线程完成,而提前终止它.我们可以想象在WORD中进行后台打印,如果打印结束了,那线程就可以结束了.如果用户中止了打印,那后台打印线程也要 ...
- ArcGIS10.2最新全套下载地址
http://www.tuicool.com/articles/VfaMfy 免责声明: 该链接来自于哥伦比亚大学或者牛津大学的网站链接, 下载 软件之前确保有正版的软件授权 ,本博客只是转载了网站链 ...
- C++中的位运算总结
1)位运算 位运算是指对转换成二进制的数字进行每一位上的0.1的运算,运算涉及到五种运算:与(&),或(|),异或(^),左移(<<),右移(>>). 如下表所示: ...
- hdu2072
注意输入全是0的情况. #include <stdio.h> #include <string.h> #include <algorithm> using name ...
- DPDK中断机制简析
DPDK通过在线程中使用epoll模型,监听UIO设备的事件,来模拟操作系统的中断处理. 一.中断初始化 在rte_eal_intr_init()函数中初始化中断.具体如下: 1.首先初始化intr_ ...
- laravel5.2 学习之服务提供者
契约接口:app\Contracts\LanguageContract.php <?php namespace App\Contracts; interface LanguageContract ...