js滚轮事件兼容性问题需要注意哪些


Posted in Javascript onNovember 15, 2016

本文实例为大家解析了js滚轮事件需要注意的兼容性问题,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  #div {
   width: 300px;
   height: 300px;
   background: red;
  }
 </style>
 <script>
  function addEvent(obj,sEv,fn){
   if(obj.addEventListener){
    return obj.addEventListener(sEv,fn,false);
   }else{
    return obj.attachEvent('on' + sEv,fn);
   }
  }

  function addWheel(obj,fn){
   function wheel(ev){
    var oEvent = ev || event;
    var bDown = true;
    bDown = oEvent.wheelDelta?oEvent.wheelDelta > 0:oEvent.detail < 0;
    fn && fn(bDown);
    oEvent.preventDefault && oEvent.preventDefault();
    return false;
   }
------------------------------------------------------------------
return false阻止浏览器默认行为,遇到绑定添加的事件的时候就失效了;
所有要用oEvent.preventDefault();在使用此方法前要做判断;
------------------------------------------------------------------
   if(window.navigator.userAgent.indexOf('Firefox') !=-1){
    obj.addEventListener('DOMMouseScroll',wheel,false);注:所有以DOM开头的只能通过事件绑定的形式添加此事件;
   }else{
    addEvent(obj,'mousewheel',wheel);
   }
  }
-------------------------------------------------------------------------------------------------
 obj.onmousewheel:滚动鼠标滚轮的时候触发;兼容IE系列和chrome;
 DOMMouseScroll:只能通过事件绑定的形式添加此事件;只兼容FF;
 兼容性问题解决方案:判断浏览器;
 oEvent.wheelDelta:不兼容FF;火狐下报undefined;
  chrome&&IE:
   下:-120;//以具体弹出数字为准
   上:120;

 oEvent.detail:
  FF:
   下:3;//以具体弹出数字为准
---------------------------------------------------------------------------------------------------
  window.onload = function () {
   var oDiv = document.getElementById('div');
   addWheel(oDiv,function(bDown){
    oDiv.onmousewheel = null;
    if(bDown){
     oDiv.style.height = oDiv.offsetHeight - 10 + 'px';
    }else{
     oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
    }
   });
  }
 </script>
</head>
<body>
<div id="div"></div>
</body>
</html>

滚轮事件的兼容性问题比较多,所以大家在实现这个效果的时候也要随时测试兼容性的问题。

暂时整理的大概就这些,还有很多不足的地方,大家多提宝贵意见!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
jquery 选取方法都有哪些
May 18 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
Javascript实现单例模式
Jan 24 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
禁用backspace网页回退功能的实现代码
Nov 15 #Javascript
sea.js常用的api简易文档
Nov 15 #Javascript
js实现倒计时及时间对象
Nov 15 #Javascript
Bootstrap简单表单显示学习笔记
Nov 15 #Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 #Javascript
js调用屏幕宽度的简单方法
Nov 14 #Javascript
jquery心形点赞关注效果的简单实现
Nov 14 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
javascript date格式化示例
2013/09/25 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Cpy和Python的效率对比
2015/03/20 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
教育课题研究自我鉴定范文
2013/12/28 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
聚美优品的广告词
2014/03/14 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
销售会议开幕词
2015/01/28 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书