js滚轮事件

首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)。w3c文档已经废弃了onmousewheel事件,建议使用onwheel鼠标事件。

该事件的浏览器支持是:

 

这样就不用再分浏览器绑定事件了,如果不用兼容太低的版本或者safari浏览器。

现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,其中负数表示为向上,正数表示为向下;wheelDelta只取±xxx(数值各个浏览器不定),其中负数表示为向下,正数数表示向上。

写一个函数判断鼠标上滚还是下滚:

        function wheelUpDown (obj) {
            obj.addEventListener("wheel",function (e) {
                var wheelNum = e.wheelDelta || -e.deltaY;    //我用的ff版本是61.0.1,e.delta在鼠标滚动不变化,为0,变化的是e.deltaY;
                if(wheelNum > 0){
                    alert("鼠标上滚");
                }
                if(wheelNum < 0){
                    alert("鼠标下滚");
                }
            })            
        }
原文地址:https://www.cnblogs.com/chendc/p/9360226.html