JavaScript 滚轮事件使用说明


Posted in Javascript onMarch 07, 2010

不过遗憾的是各浏览器都不尽相同。

一) 事件名称不相同
IE, KHTML(Safari, Chrome), Opera对应的事件名称是 "mousewheel"。而 Gecko(Firefox, Netscape) 对应的事件名称是 "DOMMouseScroll"。

二) 事件对象的属性不一样
有时我们需要知道用户是向上滚了还是向下滚了。例如我们有一个响应滚动事件的函数:

function wheelHandle(e) { 
if(e.wheelDelta) {// IE, KHTML, Opera 
alert(e.wheelDelta > 0 ? '向上滚' : '向下滚'); 
} else { // Gecko 
alert(e.detail < 0 ? '向上滚' : '向下滚'); 
} 
}

IE, KHTML 支持 e.wheelDelta ,大于 0 为向上滚动,小于 0 为向下滚动。Gecko 支持 e.detail,小于 0 为向上滚动,大于 0 为向上滚动,跟前面的相反。而 Opera 比较牛,两种都支持。
下面给出一个注册滚轮事件的函数做参考:
/** 
* 注册滚轮事件函数 
* @param element : 注册的事件对象 
* @param wheelHandle : 注册事件函数 
*/ 
function addScrollListener(element, wheelHandle) { 
if(typeof element != 'object') return; 
if(typeof wheelHandle != 'function') return; 
// 监测浏览器 
if(typeof arguments.callee.browser == 'undefined') { 
var user = navigator.userAgent; 
var b = {}; 
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object"; 
b.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera; 
b.ie = user.indexOf("MSIE") > -1 && !b.opera; 
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml; 
arguments.callee.browser = b; 
} 
if(element == window) 
element = document; 
if(arguments.callee.browser.ie) 
element.attachEvent('onmousewheel', wheelHandle); 
else 
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', wheelHandle, false); 
}

注册一个监听事件:
var display = document.getElementById('display'); 
function wheelHandle(e) { 
if(e.wheelDelta) {// IE, KHTML, Opera 
display.innerHTML = (e.wheelDelta > 0 ? '上' : '下'); 
} else { // Gecko 
display.innerHTML = (e.detail < 0 ? '上' : '下'); 
} 
} 
addScrollListener(window, wheelHandle);
Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript操作表格排序实例分析
May 06 Javascript
创建一个类Person的简单实例
May 17 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
vue递归实现树形组件
Jul 15 Vue.js
javascript下4个跨浏览器必备的函数
Mar 07 #Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 #Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 #Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 #Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 #Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 #Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 #Javascript
You might like
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php 的反射详解及示例代码
2016/08/25 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
Python建立Map写Excel表实例解析
2018/01/17 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python sorted函数原理解析及练习
2020/02/10 Python
Django的CVB实例详解
2020/02/10 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
机关道德讲堂实施方案
2014/03/15 职场文书
大跃进口号
2014/06/16 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
MySQL的Query Cache图文详解
2021/07/01 MySQL
springboot读取nacos配置文件
2022/05/20 Java/Android