鼠标滚动事件mousewheel（DOMMouseScroll）

红太狼 2020-06-23 17:32 1016阅读 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 条评论，1016人围观）

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

相关阅读

相关 js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）

js鼠标事件，相关属性： var div = document.getElementById("box") // 1、单击事件

╰+哭是因爲堅強的太久メ/ 2023年10月02日 23:49/ 0 赞/ 29 阅读

相关鼠标事件

1.移动、点击 <Grid> <Grid.RowDefinitions> <RowDefinition></R

小灰灰/ 2023年08月17日 16:53/ 0 赞/ 121 阅读

相关鼠标事件

–鼠标事件 click：单击 dbclick：双击 mousedown：用户按下任何鼠标按钮触发；冒泡 mouseup：用户释放鼠标按钮时触发；冒泡 mous

太过爱你忘了你带给我的痛/ 2023年07月13日 15:11/ 0 赞/ 96 阅读

相关鼠标事件

由鼠标事件（MouseEvent）可以发现：其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。一、clientX、clie

╰+哭是因爲堅強的太久メ/ 2023年02月21日 06:12/ 0 赞/ 73 阅读

相关 jq鼠标滚动事件

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

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

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

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

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

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

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

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

相关 js监控鼠标滚动事件

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

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

相关 js 鼠标滑轮滚动事件

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

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

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

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

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