<!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. Mac 共享无线网络

    dock栏启动『设置』进入下一步.   进入设置后,点击『共享』进入下一步.   进入共享后 1.选择左边框中『互联网共享』,就会看到截图右边的样子 2.『共享以下来源链接』一项选择『以太网』(默认应 ...

  2. 使用JS对form的内容验证失败后阻止提交

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  3. CRT(secureCRT)中文显示研究&Linux中文字符显示

    关于secureCRT设置编码: 基本上只需要设置crt字符编码与远程服务器一致就可以了.要注意的是,有时设置完之后要重启secureCRT, 不然不会生效.

  4. 【NOIP2017练习】跳跃切除子序列（模拟）

    题意: 思路: 已放弃 #include <bits/stdc++.h> typedef long long LL; int main(){ int T; scanf("%d&q ...

  5. HDU 4416 (后缀自动机)

    HDU 4416 Good Article Good sentence Problem : 给一个串S,和一些串T,询问S中有多少个子串没有在T中出现. Solution :首先对所有的T串建立后缀自 ...

  6. zoj3988 Prime Set

    思路不难想到二分图求个最大匹配P,若P>=K,则2*K即可,否则应为P*2+min(K-P,未匹配且有度数不为0的顶点个数s).但坑点在于有1的情况,所以如果直接建二分图去跑最大匹配会因为1的影 ...

  7. [bzoj2946][Poi2000]公共串_后缀数组_二分

    公共串 bzoj-2946 Poi-2000 题目大意:给定$n$个字符串,求他们的最长公共子串. 注释:$1\le n\le 5$,$1\le minlen<maxlen\le 2000$. ...

  8. P1605 迷宫 洛谷

    https://www.luogu.org/problem/show?pid=1605 题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐 ...

  9. 洛谷 P1122 最大子树和

    P1122 最大子树和 题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的 ...

  10. shell脚本变量的参数

    https://stackoverflow.com/questions/5163144/what-are-the-special-dollar-sign-shell-variables mkdir f ...