鼠标滚轮事件（mousewheel 与 DOMMouseScroll）

转载于 2018-08-03 14:48:00 发布 · 414 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BlingSun/p/9414097.html

本文介绍如何统一处理不同浏览器中的鼠标滚轮事件。Firefox 使用 DOMMouseScroll 事件，并提供 event.detail 属性来判断滚动方向及幅度；而其他浏览器通常使用 mousewheel 事件并通过 event.wheelDelta 获取滚动信息。文中给出了一段 jQuery 示例代码，演示如何兼容多种浏览器的滚轮事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FF使用DOMMouseScroll，其他浏览器都是用mousewheel

FF下有个特殊属性event.detail，表示滚动的值

event.detail

正数：向下滚动，负数：向上滚动

滚动一次值3，向上滚动一页值为-32768，向下滚动一页值为+32768，其他值代表滚动的行数, 方向代表了数值的正负号

受信任的事件是不会给detail赋值0

其他浏览器，通过event.wheelDelta获取滚动值

正数：向上滚动，负数：向下滚动

滚动一次值120

  $(".s-slider").on("mousewheel DOMMouseScroll", function (e) {
                console.log(e);
                var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox


                if (delta > 0) {
                    // 向上滚
                    console.log("wheelup");
                
                } else if (delta < 0) {
                    // 向下滚
                    console.log("wheeldown");             
                    
                }
            })

转载于:https://www.cnblogs.com/BlingSun/p/9414097.html