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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
禁用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
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
JavaScript触发器详解
2007/03/10 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
清空上传控件input file的值
2010/07/03 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
js变量提升深入理解
2016/09/16 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
基于Python的身份证号码自动生成程序
2014/08/15 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python正则实现提取电话功能
2018/02/24 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
工作决心书
2014/03/11 职场文书
《荷花》教学反思
2014/04/16 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL