跨浏览器标准化鼠标滚轮速度

小编典典

跨浏览器标准化鼠标滚轮速度

javascript

在该代码中，我使用鼠标滚轮来放大/缩小HTML5
Canvas。我找到了一些可以标准化Chrome和Firefox之间速度差异的代码。但是，Safari中的缩放处理比任何一个都快得多。

这是我目前拥有的代码：

var handleScroll = function(e){
  var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
  if (delta) ...
  return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false);     // Everyone else

我可以使用什么代码在Chrome v10 / 11，Firefox v4，Safari v5，Opera
v11和IE9上以相同数量的鼠标滚轮滚动获得相同的“增量”值？

编辑：进一步的调查显示一个滚动事件“向上”是：

                  | evt.wheelDelta | 细节
------------------ + ---------------- + ------------
  Safari v5 / Win7 | 120 | 0
  Safari v5 / OS X | 120 | 0
  Safari v7 / OS X | 12 | 0
 Chrome v11 / Win7 | 120 | 0
 Chrome v37 / Win7 | 120 | 0
 Chrome v11 / OS X | 3（！）| 0（可能是错误的）
 Chrome v37 / OS X | 120 | 0
        IE9 / Win7 | 120 | 未定义
  Opera v11 / OS X | 40 | -1
  Opera v24 / OS X | 120 | 0
  Opera v11 / Win7 | 120 | -3
 Firefox v4 / Win7 | 未定义 -3
 Firefox v4 / OS X | 未定义 -1
Firefox v30 / OS X | 未定义 -1

此外，即使在缓慢移动的情况下，在OS X上使用MacBook触控板也会产生不同的结果：

在Safari和Chrome上，wheelDelta鼠标滚轮的值为3而不是120。
在Firefox上，有时detail通常2是这样1，但是当滚动速度非常慢时，根本 没有事件处理程序会引起火灾 。

所以问题是：

区分这种行为的最佳方法是什么（理想情况下，无需任何用户代理或OS嗅探）？

阅读 372

2020-05-01

共1个答案

小编典典

鉴于：

过去，OS X上同一浏览器的不同版本产生了不同的价值，将来可能会产生不同的价值，
在OS X上使用触控板产生的效果与使用鼠标滚轮产生的效果非常相似，但事件值却大不相同，并且JS无法检测到设备差异

…我只能建议使用以下基于符号的简单计数代码：

var handleScroll = function(evt){
  if (!evt) evt = event;
  var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;
  // Use the value as you will
};
someEl.addEventListener('DOMMouseScroll',handleScroll,false); // for Firefox
someEl.addEventListener('mousewheel',    handleScroll,false); // for everyone else

最初的尝试是正确的。

这是我第一次尝试对值进行规范化的脚本。它在OS X上有两个缺陷：OS X上的Firefox生成的值应为应有值的1/3，而OS
X上的Chrome生成的值应为应有值的1/40。

// Returns +1 for a single wheel roll 'up', -1 for a single roll 'down'
var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3;              // Firefox;         TODO: do not /3 for OS X
  } else return w/120;             // IE/Safari/Chrome TODO: /3 for Chrome OS X
};

编辑：@Tom的一个建议是简单地将每个事件调用计为一次移动，并使用距离的符号对其进行调整。在OS
X上平滑/加速滚动时，这不会产生很好的效果，也不能很好地处理鼠标滚轮快速移动（例如wheelDelta240）的情况，但是这种情况很少发生。由于此处描述的原因，现在该代码是此答案顶部显示的推荐技术。

2020-05-01