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 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JScript中的条件注释详解
Apr 24 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
js中数组的常用方法小结
Dec 30 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
禁用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基础学习笔记
2007/03/18 PHP
生成卡号php代码
2008/04/09 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php四种定界符详解
2017/02/16 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
定制FileField中的上传文件名称实例
2017/08/23 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python 同时读取多个文件的例子
2019/07/16 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
文明社区申报材料
2014/08/21 职场文书
英文升职感谢信
2015/01/23 职场文书
关于环保的宣传稿
2015/07/23 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
赞美教师的句子
2019/09/02 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python