<!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 > :oEvent.detail < ;

                fn && fn(bDown);

                oEvent.preventDefault && oEvent.preventDefault();

                return false;

            }
------------------------------------------------------------------
return false阻止浏览器默认行为，遇到绑定添加的事件的时候就失效了；
所有要用oEvent.preventDefault（）；在使用此方法前要做判断；
------------------------------------------------------------------

            if(window.navigator.userAgent.indexOf('Firefox') !=-){

                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>
滚轮事件的兼容性问题比较多，所以大家在实现这个效果的时候也要随时测试兼容性的问题。
暂时整理的大概就这些，还有很多不足的地方，大家多提宝贵意见！^_^

js滚轮事件需要注意的兼容性问题的更多相关文章

  1. 学习 JS滚轮事件(mousewheel/DOMMouseScroll)

    学习 JS滚轮事件(mousewheel/DOMMouseScroll) 1-1 滚轮事件兼容性的差异   IE,chrome,safari 浏览器都使用 onmousewheel, 只有firefo ...

  2. JS滚轮事件(mousewheel/DOMMouseScroll)了解

    已经没有了小学生时代过目不忘的记忆力了,很多自己折腾的东西.接触的东西,短短1年之后就全然不记得了.比方说,完全记不得获取元素与页面距离的方法(getBoundingClientRect),或者是不记 ...

  3. js 滚轮事件 滚轮焦点图（轮播图）

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  4. JS滚轮事件onmousewheel

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, S ...

  5. js滚轮事件

    首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持).w3c文档已经废弃了onmousewheel ...

  6. js滚轮事件兼容写法

    /** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, ...

  7. JS滚轮事件封装

    wheel(function(isTrue){ console.log(isTrue); }) function wheel(callback){ if(navigator.userAgent.ind ...

  8. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  9. 两种js监听滚轮事件的方式

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...

随机推荐

  1. git-github 提示Permission denied (publickey) （windows）

    这种绝大多数情况是由于公钥设置的问题. 1.生成公钥 参考地址:https://help.github.com/articles/generating-a-new-ssh-key-and-adding ...

  2. POJ1422 Air Raid

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8006   Accepted: 4803 Description Consi ...

  3. Codeforces704C. Black Widow

    n<=1e5个值v,分别由<=1e5的m个变量中的1<=ki<=2个布尔变量xj(或某个变量取反)或起来组成,而所有的v异或起来为1,一个x不会在输入数据中出现超过2次,包括他 ...

  4. Servlet开发（3）

    Servlet开发 Servlet过滤器: 主要是对访问主页的用户进行过滤,通过登录系统进入的用户可以看到主页内容,在session中存在currentuser. 可以对此进行判断: package ...

  5. Critical Links-UVa796(无向图求桥)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  6. Ubuntu 16.04创建Swap分区或增加Swap分区容量（转）

    要在Ubuntu中要创建Swap分区主要有如下2种方式: 一.传统创建方式 一般情况下,我们都会使用dd命令来预先创建交换分区文件,然后再用/dev/zero将该文件的内容全部置零,创建时还将用到bs ...

  7. JDBC的异常

    以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/exceptions.html: 异常处理可以允许处理一个异常情况,例如可控方式的程序定义错误. 当异常 ...

  8. Android GIS开发系列-- 入门季（7） 利用GeometryEngine坐标转换、计算距离与面积等

    GeometryEngine是Arcgis的重要工具类,利用此工具类,可以计算地图上的距离.面积,将点.线.面转化为Json数据,将Json转化为点线面,坐标转换作用非常强大. 一.坐标转化 将用到方 ...

  9. dubbo的泛化调用研究

    结论: 泛化调用需要继承一个类,在配置文件里需要明确指出generic=true; 泛化调用在书写provider代码时,变化不大: 泛化调用和普通调用的区别主要在consumer,从‘调用’的表面意 ...

  10. vux 实现多栏滚动

    1.PopupPicker 组件 <!-- vux-ui --> <template> <div> <!-- 标题栏 --> <x-header ...