在浏览器中规范鼠标滚轮速度 [英] Normalizing mousewheel speed across browsers

问题描述

对于另一个问题，我撰写了这个答案，包括此示例代码。

For a different question I composed this answer, including this sample code.

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

In that code I use the mouse wheel to zoom in/out of an HTML5 Canvas. I found some code that normalizes speed differences between Chrome and Firefox. However, the zoom handling in Safari is much, much faster than in either of those.

这是我目前的代码：

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

我可以使用哪些代码来获得相同金额的相同'delta'值鼠标滚轮滚过Chrome v10 / 11，Firefox v4，Safari v5，Opera v11和IE9？

What code can I use to get the same 'delta' value for the same amount of mouse wheel rolling across Chrome v10/11, Firefox v4, Safari v5, Opera v11 and IE9?

这个问题是相关的，但没有好的答案。

This question is related, but has no good answer.

修改：进一步调查显示，一个滚动事件'up'是：

Edit: Further investigation shows that one scroll event 'up' is:

                  | evt.wheelDelta | evt.detail
------------------+----------------+------------
  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      (possibly wrong)
 Chrome v37/OS X  |       120      |      0
        IE9/Win7  |       120      |  undefined
  Opera v11/OS X  |        40      |     -1
  Opera v24/OS X  |       120      |      0
  Opera v11/Win7  |       120      |     -3
 Firefox v4/Win7  |    undefined   |     -3
 Firefox v4/OS X  |    undefined   |     -1
Firefox v30/OS X  |    undefined   |     -1

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

Further, using the MacBook trackpad on OS X gives different results even when moving slowly:

• 在Safari和Chrome上， wheelDelta 对于鼠标滚轮而言值为3而不是120.


• 在Firefox上，详细信息通常为 2 ，有时 1 ，但滚动速度非常慢没有任何事情HANDLER FAES全部。

• On Safari and Chrome, the wheelDelta is a value of 3 instead of 120 for mouse wheel.
• On Firefox the detail is usually 2, sometimes 1, but when scrolling very slowly NO EVENT HANDLER FIRES AT ALL.

所以问题是：

区分这种行为的最佳方法是什么（理想情况下没有任何用户代理或操作系统嗅探）？

What is the best way to differentiate this behavior (ideally without any user agent or OS sniffing)?

推荐答案

编辑2014年9月

鉴于：

• OS X上相同浏览器的不同版本过去产生了不同的值，将来可能会这样做，而且


• 使用OS X上的触控板产生与使用鼠标滚轮非常相似的效果，但却给出非常不同的效果事件值，但JS无法检测到设备差异

• Different versions of the same browser on OS X have yielded different values in the past, and may do so in the future, and that
• Using the trackpad on OS X yields very similar effects to using a mouse wheel, yet gives very different event values, and yet the device difference cannot be detected by JS

...我只能推荐使用这个简单的，基于标志的计数代码：

…I can only recommend using this simple, sign-based-counting code:

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的值。

Here is my first attempt at a script to normalize the values. It has two flaws on OS X: Firefox on OS X will produce values 1/3 what they should be, and Chrome on OS X will produce values 1/40 what they should be.

// 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
};

您可以在自己的浏览器上测试此代码： http://phrogz.net/JS/wheeldelta.html

You can test out this code on your own browser here: http://phrogz.net/JS/wheeldelta.html

欢迎在OS X上检测和改进Firefox和Chrome行为的建议。

编辑：来自@的一条建议Tom只是将每个事件调用计为一次移动，使用距离符号进行调整。这在OS X上的平滑/加速滚动下不会给出很好的结果，也不会在鼠标滚轮移动得非常快时处理完美的情况（例如 wheelDelta 是240），但这些都发生了很少。此代码现在是本答案顶部显示的推荐技术，原因如此。

Edit: One suggestion from @Tom is to simply count each event call as a single move, using the sign of the distance to adjust it. This will not give great results under smooth/accelerated scrolling on OS X, nor handle perfectly cases when the mouse wheel is moved very fast (e.g. wheelDelta is 240), but these happen infrequently. This code is now the recommended technique shown at the top of this answer, for the reasons described there.

这篇关于在浏览器中规范鼠标滚轮速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！