鼠标滚轮事件

前几天一个同学问我鼠标滚动事件。想做一个通过滚动鼠标的滚轮,来旋转导航。

查了点资料,完成了同学的问题。

不过,作为一个知识点,也记录下来,以加强印象。

鼠标滚轮事件,就是 wheel (滚轮)事件。

注:MDN(Molliza的开发者社区)不推荐使用传统的 onmousescroll 事件。作为技术强迫着患者,我也不建议用了,推荐使用 wheel 。

wheel 的事件对象有 4 个属性:

  1. deltaX,鼠标滚轮左右摆动,本属性是只读的。 负值,向左;正值,向右。(正负方向,跟系统的x坐标保持一致。)
  2. deltaY,鼠标滚轮上下滚动,只读。负值,向上;正值,向下。个人觉得 deltaY 是用的最多的属性。
  3. deltaX。不解释,感觉用的少。
  4. deltaMode,属性返回一个数字,表示滚动值 (deltaX,deltaY,deltaZ) 的长度单位。
    0 =像素
    1 =行
    2 =页

不过,使用 wheel 事件,浏览器往往会给一个警告。

这是因为,wheel 事件自己本身就有默认操作,就是滚动页面。浏览器不确定用户执行这个事件是否要触发还是要阻止默认操作发生,所以会给出这个警告。

可以给 addEventListener 添加第三个参数 { passive:false } 来去掉这个警告。就是明确的告诉浏览器,如果要阻止默认操作,有效!

<div id="box" style="height: 1500px;">
    1
</div>
<script>
    let box = document.getElementById("box");
     window.addEventListener("wheel",function(e){
         let evt = e || window.event;
         evt.preventDefault();
         if( evt.deltaY>0 ){
             console.info("向下滚动");
         }else{
             console.info("向上滚动");
         }
         console.info( evt.type, evt.deltaX,evt.deltaY,evt.deltaZ );
     },{ passive: false });
</script>

不过,浏览器不同,每次滚动产生的数值也不同。

chrome(77,目前的最新版本),每次滚动的值都是  125,或者 -125

firefox,每次滚动值 3,-3 。

Edge,IE11,则是 正负 70 左右。

不过,无论值是多少,都可以通过正负 判断滚轮是向上还是向下滚动,继而继续一下步的特效。

  • 3
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值