鼠标滚动事件mousewheel（DOMMouseScroll）

红太狼 2020-06-23 17:32 970阅读 0赞

滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;

1.mousewheel事件中的 “event.wheelDelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。   
2. DOMMouseScroll事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。   
3. mousewheel事件在 Opera 10+ 中却是个特例，既有 “event.wheelDelta” 属性，也有 “event.detail” 属性。

$(document).on("mousewheel DOMMouseScroll", function (e) { 
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie &其它
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
    
        //var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); //合并写法
    
        if (delta > 0) {
            // 向上滚
            console.log("wheelup");
        } else if (delta < 0) {
            // 向下滚
            console.log("wheeldown");
        }
    });

判断Firefox：(除了使用 userAgent属性)

if( document.mozHidde != undefined){
    	//此为firefox 
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，970人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq鼠标滚动事件

JQ鼠标滚动事件 $(document).on("mousewheel", function (e, delta) { var wheel =

拼搏现实的明天。/ 2022年09月04日 04:50/ 0 赞/ 171 阅读

相关锁定当前div的鼠标滚动事件

页面有如下div <div id="content"></div> 给该div绑定如下事件 $('content').bind('mousewhee

骑猪看日落/ 2022年08月06日 11:10/ 0 赞/ 201 阅读

相关鼠标滚轮事件

要达到效果是，滚动鼠标到一定距离，导航条出现，没有达到这个高度，滚动条消失鼠标滚轮监听需要用到插件 jquery.mousewheel.min.js v

我就是我/ 2022年06月01日 21:19/ 0 赞/ 642 阅读

相关鼠标跟随事件

<html> <head> <title></title> </head> <body> <script> A=doc

╰半橙微兮°/ 2022年05月18日 00:56/ 0 赞/ 287 阅读

相关鼠标滚轮事件以及满屏滚动实现

MDN对鼠标的滚轮事件的介绍： ![<code>这里写图片描述</code>][code_code] ![这里写图片描述][70] MDN对鼠标滚轮事件的实现：

素颜马尾好姑娘i/ 2022年05月17日 22:22/ 0 赞/ 325 阅读

相关鼠标事件事件对象

事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘

Dear 丶/ 2022年05月17日 11:46/ 0 赞/ 310 阅读

相关 Firefox上实现鼠标滚轮事件时隐藏滚动条

在Chrome上实现了页面的鼠标滚轮事件，但是在Firefox上会出先横向和纵向滚动条，如果设置存放内容的容器overflow:hidden;会导致滚轮事件失效，因此不能通过这

喜欢ヅ旅行/ 2022年03月31日 04:37/ 0 赞/ 434 阅读

相关 js监控鼠标滚动事件

//滚动动画 windowAddMouseWheel(); function windowAddMous

短命女/ 2021年12月15日 11:39/ 0 赞/ 383 阅读

相关 js 鼠标滑轮滚动事件

鼠标滚动事件非火狐 .onmousewheel='操作' 鼠标方向 event.wheelDelta; //在

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 13:05/ 0 赞/ 578 阅读

相关鼠标滚动事件mousewheel（DOMMouseScroll）

滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel; 1.mousewheel事件中的 “event.wheelD...

红太狼/ 2020年06月23日 17:32/ 0 赞/ 971 阅读