js onwheel获取鼠标滚动量

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

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

ev对象如下

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

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

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

另外：wheelEvent和onscroll是不一样的，scroll只针对于有滚动量（有滚动条）的对象。

 

 

onwheel / onmousewheel / onmousescroll