javascript滚动栏响应鼠标滑轮的实现上下滚动事件
2016-04-12 18:51
716 查看
实现鼠标滚动滚轮事件:
还有还有一种方法:
使用jquery.mousewheel.js插件。个人认为这个挺好用,类似与jQuery封装了,攻克了个浏览器的兼容性:
使用例如以下:
1. 首先导入jquery.mousewheel.js文件
2. 在你要使用的区域内加入mousewheel事件
<script type="text/javascript"><pre name="code" class="javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"向上"); } }else if(e.detail){ //Firefox if(e.detail==-3) { //向上滚动事件<br> alert(e.detail +"向上"); }else { //向下滚动事件<br> alert(e.detail +"向下 "); } } }; if(document.addEventListener){ //adding the event listerner for Mozilla document.addEventListener("DOMMouseScroll" ,scrollFunc, false); } //IE/Opera/Chrome window.onmousewheel=document.onmousewheel=scrollFunc; </script>
还有还有一种方法:
使用jquery.mousewheel.js插件。个人认为这个挺好用,类似与jQuery封装了,攻克了个浏览器的兼容性:
使用例如以下:
1. 首先导入jquery.mousewheel.js文件
2. 在你要使用的区域内加入mousewheel事件
<pre name="code" class="javascript"><pre name="code" class="javascript"> $(function (){ $("#XXXX").bind("mousewheel", function(event) { event.preventDefault(); if(event.deltaY=="-1"){ //向下滚动事件<br> }else{ //向上滚动事件 } }); });
相关文章推荐
- 日志数据文件Json字段数据入库处理
- 纯js实现复制到剪贴板功能
- js正则表达式总结
- 快速构建自己的第一个SeaJS
- js数组之稀疏数组和密集数组
- json文件中的特殊字符处理,放置json数据读取产生错误
- JS的逻辑运算符&& ||
- JavaScript:闭包
- JavaScript获取非行间样式/定义样式
- Javascript模板引擎原理,几行代码的事儿
- jsoup的使用
- JSPatch-使用经验记录
- JavaScript:获取系统当前时间,构造格式化的字符串
- js 二分法查找
- JS求两个数组 差集
- Chrome 的插件JSONView 格式化转换本地的文件
- javascript全局变量与局部变量
- html修改为jsp
- js中的clientWidth offsetWidth scrollWidth等的含义
- 使用js实现全选、反选功能