js onwheel获取鼠标滚动量

posted @

js中获取鼠标滚动量/滚动了多少可以用onwheel事件来实现。

1 let axis = 0;  // 如果需要记录累积量,可以用一个变量来存储下来
2 window.onwheel = function (ev) {
3     axis += ev.deltaY;
4     console.log(ev)
5 }

ev对象如下

其中的delta项就是各个方向上的滚动量,注意这个量是每一次连续滚动了多少,而不是累积量。如deltaY,鼠标向上滚动时为负值,反之正值。滚轮有横向滚动键(一般貌似是滚轮左右拨动的按键触发式)的则可以捕获到deltaX的变化。

这样就可以通过滚动量的变化来进行某些操作了,比方说图片的放大缩小,translateZ()拉近拉远,改变透视距离等。

注意:mousewheelEvent在部分浏览器上依旧可以用来处理同样的操作,是一个弃用方案,不推荐使用,详见MDN说明

另外:wheelEvent和onscroll是不一样的,scroll只针对于有滚动量(有滚动条)的对象。

 

 

onwheel / onmousewheel / onmousescroll 

转载请注明出处@https://www.cnblogs.com/noah227/p/13712904.html
posted @   彼时今日  阅读(2471)  评论(1编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示