使用javascript检测鼠标滚轮的类型（平滑与凹口）

我一直在从事一个网络项目，该项目使用鼠标滚轮在视频上执行不同的操作。在某个时刻，我必须为

deltaY

和

deltaY

应该滚动的帧数之间的关系建立一个系数。因此，不同类型的鼠标返回的结果非常不同，特别是平滑滚动的鼠标

在我提供的小提琴中，这是通过以下方式完成的：

targetOffset = targetOffset + (e.deltaY/1000); // 16000 aprox for smooth scroll mice

而

1000

是一个适用于普通鼠标的系数。但是，如果我使用平滑滚动触摸“轮子”的系数，就像那些mac电脑（实际上没有轮子）那样，系数“太多了”，是“太多”的16倍

是否可以通过某种方式检测或校准系数

var FF=！（window.mozInnerScreenX==null）；//是firefox吗？
var vid=document.getElementById（“v”）；
var canvas=document.getElementById（“c”）；
var context=canvas.getContext（'2d'）；
var targetFrame=document.getElementById（'t'）；
var-cw=200；
var ch=数学四舍五入（cw/1.7777）；
canvas.width=cw；
canvas.height=ch；
var directionScroll=0；
var targetOffset=0；
var系数=1000；
变量模式=['像素'，'线条'，'页面']；
参阅暂停（）；
vid.addEventListener（'seek'，function（）{
背景图像（vid，0，0，cw，ch）；
});
window.addEventListener（'wheel'，函数（e）{
e、 预防默认值（）；
//正常情况下，滚动应该是一个减法
//不是一个总数，而是“我喜欢这样！”
//通过@kaido的回答改变了这一点，部分解决了Firefox和Chrome之间的差异
//警报（模式[e.deltaMode]）；
如果（模式[e.deltaMode]=“像素”）系数=1000；
否则，如果（模式[e.deltaMode]=='lines'）系数=30；//这应该对应于线高度？？
else返回false；//禁用页面滚动，模式[e.deltaMode]=“页面”
targetOffset=targetOffset+（e.deltaY/系数）；//e.deltaY就是这个东西！！
如果（e.deltaY<0）方向croll=1；
如果（e.deltaY>0）方向croll=-1；
targetFrame.value=targetOffset；
返回false；
});
var renderLoop=function（）{
requestAnimationFrame（函数（）{
背景图像（vid，0,0，cw，ch）；
如果（参见暂停| |参见结束）{
targetOffset=targetOffset*0.9；
targetFrame.value=Math.round（targetOffset*100）/100；
var vct=vid.currentTime-targetOffset；
if（vctvid.持续时间）{
vct=vct-视频持续时间；
}
vid.currentTime=vct；
}
renderLoop（）；
});
};
renderLoop（）
.column{
浮动：左；
宽度：50%；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
#c{
边框：1px纯黑；
}

向上滚动是向前的
视频元素：
画布元素：
动力：
为什么不检测增量是否大于某个阈值，如果大于某个阈值，则除以
16
。我会这样想：

if (Math.abs(e.deltaY) > 400) slowdown = 16;
else if (Math.abs(e.deltaY) < 15) slowdown = 1;
targetOffset = targetOffset + (e.deltaY/1000/slowdown);


向上滚动是向前的
视频元素：
画布元素：
动力：
请参见最后的更新


我的原始答案：

我没有mac电脑，也没有“平滑”鼠标，但我已经在Chrome和Firefox上测试了你的代码片段，无论是在Windows还是Linux上

在Windows和Linux上对Chrome都非常有效，但是

看起来这个系数不适合Firefox。。。使用
200
时效果更好（不如Chrome）

还有一件事：

您是否在windows上测试过mac fancy鼠标，反之亦然？这可能是与mac相关的问题吗

更新：

其他答案很好，但我对你的问题感到困惑，并通过代码和其他答案指出的内容学到了很多东西，但有些东西像虫子一样留在我的脑海中

搜索这个主题，我发现信息非常丰富。它包括一个可能的鼠标滚动校准脚本和一个函数
getScrollLineHeight

为了完整起见，我在代码段中复制了这个函数，但最后我认为不需要它。我已经注释掉了调用
getScrollLineHeight
的那一行，因为出于安全原因，它在该站点中不起作用，但在中起作用

我感到困惑的是，我通常会按照页面上的像素来考虑滚动。但是你的代码真的不关心这一点。我的意思是，不关心鼠标滚轮
event.deltaY
magnity。只有它是正面的或负面的，并考虑在视频时间线上向前或向后一步。

因此，这并不能解决“触摸感应滚动鼠标”的问题，但它可以轻松解决Firefox/Chrome和任何像素/行/页
deltaMode
的问题。现在，它在Chrome和Firefox中都能顺利运行。由于WEBM视频格式的原因，我无法在其他浏览器上进行测试，而且我还无法创建任何格式的视频（最后看一下我的P.D.）

所以，每次通话都只是一步：-1或1。尽管对于
deltaMode
，似乎只有Firefox返回的不是“像素”。我用这个来测试。。。现在，您可以关注平滑滚动鼠标，看看它发送每个呼叫的速度，这在这种特殊情况下才是真正重要的（请注意，许多Mac电脑都有平滑滚动软件或反向滚动）

我已经为自己注释了你的每一行代码和我的修改，但可能对其他人有用


//检测浏览器是否为firefox，因为它似乎是唯一的
//返回不同于DOM_DELTA_像素的deltaModes的浏览器
//参考：https://stackoverflow.com/a/37474225/4146962
var FF=！（window.mozInnerScreenX==null）；
//从上面的参考中获取函数
//它尝试读取文档的当前行高（对于“行”deltaMode）
函数getScrollLineHeight（）{
var-r；
变量