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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值