<!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. 桐桐的糖果计划(vijos 1325)

    背景 桐桐是一个快乐的小朋友,他生活中有许多许多好玩的事,让我们一起来看看吧…… 描述 桐桐很喜欢吃棒棒糖.他家处在一大堆糖果店的附近. 但是,他们家的区域经常出现塞车.塞人等情况,这导致他不得不等到 ...

  2. POJ 2778 (AC自动机+矩阵乘法)

    POJ 2778 DNA Sequence Problem : 给m个只含有(A,G,C,T)的模式串(m <= 10, len <=10), 询问所有长度为n的只含有(A,G,C,T)的 ...

  3. PatentTips - Register file supporting transactional processing

    BACKGROUND OF THE INVENTION With the rise of multi-core, multi-threaded data processing systems, a k ...

  4. [bzoj3879]SvT_后缀数组_RMQ_单调栈

    SvT bzoj-3879 题目大意:给定一个字符串.每次询问给定$t$个位置,求两两位置开头的后缀的$LCP$之和. 注释:$1\le length\le 5\cdot 10^5$,$\sum t\ ...

  5. Ubuntu 16.04安装基于nethogs衍生的网络监控软件（应用实时网速监控）

    基于nethogs衍生的网络监控软件有如下所列举的: nettop显示数据包类型,按数据包的大小或数量排序. ettercap是以太网的网络嗅探器/拦截器/记录器 darkstat通过主机,协议等方式 ...

  6. commons-lang常用工具类StringEscapeUtils

    原文:https://my.oschina.net/mousai/blog/88832 在apache commons-lang(2.3以上版本)中为我们提供了一个方便做转义的工具类,主要是为了防止s ...

  7. 在Windows下搭建RocketMQ

    原文:http://blog.csdn.net/u014134180/article/details/51790988 目录 目录 一 准备工作 1 RocketMQ部署架构1 2 环境配置 二 安装 ...

  8. 原想着mysql里放些文件什么的，查完资料还是算了

    三种东西永远不要放到数据库里 1.图片,文件,二进制数据,文件还是放入文件服务器吧或者分布式文件系统 2.短生命期数据 3.日志文件 mysql中一张表的数据是全部在一个数据文件中的.如果大字段的数据 ...

  9. ArcEngine 打开AutoCAD文件的几种方法

    方法一. IWorkspaceFactory pWorkspaceFactory; IFeatureWorkspace pFeatureWorkspace; IFeatureLayer pFeatur ...

  10. python 区块链程序

    python 区块链程序 学习了:https://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247484921&idx=1& ...