使用javascript检测鼠标滚轮的类型（Smooth vs Notched）

Question

我一直在使用鼠标滚轮进行视频上的不同操作的网络项目。在某些时候，我必须为deltaY和deltaY应该滚动的帧数之间的关系建立一个系数。因此，不同类型的鼠标会返回非常不同的deltaY，特别是平滑滚动。

在小提琴中，我提供了以下内容：

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

并且1000是适用于缺口滚轮普通鼠标的系数。但是，如果我将这个系数用于平滑滚动触摸“滚轮”，就像那些mac计算机（真的没有滚轮），系数“太多”，就像16次“太多”。

是否可以采取措施来检测这种情况或以某种方式调用系数？

var FF = !(window.mozInnerScreenX == null); // is 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 = Math.round(cw/1.7777);
canvas.width = cw;
canvas.height = ch;
var directionScroll = 0;
var targetOffset = 0;
var coefficient = 1000;
var modes = ['pixels', 'lines', 'page'];
vid.pause();
	vid.addEventListener('seeked', function() {
  		context.drawImage(vid, 0, 0, cw, ch);
	});
window.addEventListener('wheel', function(e) {
  e.preventDefault();
  // Normally scrolling this should be a substraction 
  //   not a sum but "I like it like this!"
  
  // Changed this with help of @Kaiido 's answer as partially solves the discrepancies between Firefox and Chrome
  // alert(modes[e.deltaMode]);
  if (modes[e.deltaMode]=='pixels') coefficient = 1000;
  else if (modes[e.deltaMode]=='lines') coefficient = 30; // This should correspond to line-height??
  else return false; // Disable page scrolling, modes[e.deltaMode]=='page'
  
  targetOffset = targetOffset + (e.deltaY/coefficient); // e.deltaY is the thing!!
  if (e.deltaY < 0) directionScroll = 1;
  if (e.deltaY > 0) directionScroll = -1;
  targetFrame.value = targetOffset;
  return false;
});

var renderLoop = function(){
  requestAnimationFrame( function(){
      context.drawImage(vid,0,0,cw,ch);
    if (vid.paused || vid.ended) {
      targetOffset = targetOffset*0.9;
      targetFrame.value=Math.round(targetOffset*100)/100;
      var vct = vid.currentTime-targetOffset;
      if (vct<0) {
        vct = vid.duration + vct;
      } else if (vct>vid.duration) {
        vct = vct - vid.duration;
      }
      vid.currentTime = vct;
    }
    renderLoop();
  });
};
renderLoop();

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
#c {
  border:1px solid black;
}

<h3>
  scroll up is forward
</h3>
<div class="row">
  <div class="column">
<div>
  Video element:
</div>
<video controls height="120" id="v" tabindex="-1" autobuffer="auto" preload="auto">
    <source type="video/webm" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
</video>
</div>
  <div class="column">
<div>
  Canvas element:
</div>
<canvas id="c"></canvas>
<div>
  Momentum: <input type=text id="t">
</div>
  </div>
</div>

任何帮助表示感谢。

修改1：

我已经更新了代码，以便将一个简单的条件应用于系数，但这并不能解决问题，因为浏览器/平台/鼠标会产生许多变体。一些调用鼠标的方法可以工作吗？

编辑2：

@Kaiido的回答转向解决Firefox和Chrome的差异。 Firefox返回lines deltaMode，而Chrome返回pixels。我已经编辑了片段来考虑这一点。

但问题仍然存在于'平滑滚动'鼠标。为了让我更加困惑，那只鼠标需要一个与lines相反的系数，它需要一个更大而不是更小的系数。

Answer 1

这是一个疯狂的猜测，因为我没有这样的缺口鼠标进行测试，但这16倍的因素听起来真的像你的delta值没有在同一模式下设置。

确实，车轮事件有3种可能的模式：

• 0 =＆gt;像素（可能是平滑滚动/ Apple鼠标）
• 1 =＆gt;线（可能是缺口小鼠）
• 2 =＆gt;页面（键盘？）

因此，您可能需要检查您的车轮事件的deltaMode属性以做出相应的反应。

onwheel = e => {
  var modes = ['pixels', 'lines', 'page'];
  console.log('scrolled by %s %s', e.deltaY, modes[e.deltaMode]);
}

<h1> scroll </h1>

Answer 2

为什么不检测增量是否大于某个阈值，如果是，则除以16。我会想到这样的事情：

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

会做到这一点。

＆＃13;

＆＃13;

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 = Math.round(cw/1.7777);
    canvas.width = cw;
    canvas.height = ch;
    var directionScroll = 0;
    var targetOffset = 0;
    var maxDelta = 0;
    // vid.pause();
		vid.addEventListener('seeked', function() {
  		context.drawImage(vid, 0, 0, cw, ch);
		});
    var slowdown = 1;
    window.addEventListener('wheel', function(e) {
      e.preventDefault();
      // Normally scrolling this should be a substraction 
      //   not a sum but "I like it like this!"
      if (Math.abs(e.deltaY) > 400) slowdown = 16;
      else if (Math.abs(e.deltaY) < 15) slowdown = 1;
      targetOffset = targetOffset + (e.deltaY/1000/slowdown); // e.deltaY is the thing!!
      if (e.deltaY < 0) directionScroll = 1;
      if (e.deltaY > 0) directionScroll = -1;
      targetFrame.value = targetOffset;
      return false;
    });
    
    var renderLoop = function(){
      requestAnimationFrame( function(){
	      context.drawImage(vid,0,0,cw,ch);
        if (vid.paused || vid.ended) {
          // setTimeout(function(){
          targetOffset = targetOffset*0.9;
          targetFrame.value=Math.round(targetOffset*100)/100;
          var vct = vid.currentTime-targetOffset;
          if (vct<0) {
            vct = vid.duration + vct;
          } else if (vct>vid.duration) {
            vct = vct - vid.duration;
          }
          vid.currentTime = vct;
          // }, 0);
        }
        renderLoop();
      });
    };
    renderLoop();

＆＃13;

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
#c {
  border:1px solid black;
}

＆＃13;

<h3>
  scroll up is forward
</h3>
<div class="row">
  <div class="column">
<div>
  Video element:
</div>
<video controls height="120" id="v" tabindex="-1" autobuffer="auto" preload="auto">
    <source type="video/webm" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
</video>
</div>
  <div class="column">
<div>
  Canvas element:
</div>
<canvas id="c"></canvas>
<div>
  Momentum: <input type=text id="t">
</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

最后请参阅更新！

我原来的回答：

我没有 mac 或“光滑”鼠标，但我已经在 Chrome 和 Firefox 上测试了你的代码片段在 Windows 和 Linux 框中。

在 Windows 和 Linux 上的 Chrome 上运行良好但是......

看起来系数不适合 Firefox ......它与200的效果更好（不如 Chrome ）。

还有一件事：

您是否在Windows上测试了 mac 花式鼠标，反之亦然？它可能是 mac 相关的问题吗？

更新：

其他答案很棒，但我对你的问题感到困惑，并且通过代码和其他答案指出了很多东西，但是我的脑海里仍然存在一些错误。

在搜索此主题时，我发现this question非常有用。它包括this answer中可能的鼠标滚动校准脚本和Detecting the line-height used by DOM_DELTA_LINE triggered scroll events的函数getScrollLineHeight。

我已将此功能复制到代码段中以保证完整性，但最后我不需要这样做。我已注释掉调用getScrollLineHeight的行，因为出于安全原因，它在此网站中无效，但在this fiddle中有效。

我的困惑在于考虑像往常一样按照页面上的像素进行滚动。但是你的代码真的不关心那个。我的意思是，不关心鼠标滚轮event.deltaY的大小。只有在正面或负面的情况下，并考虑在视频时间轴中前进或后退一步。

所以这并不能解决“触敏滚动鼠标”的问题，但它确实很容易解决Firefox / Chrome和任何Pixel / Line / Page deltaMode。现在它在Chrome和Firefox中都能顺利运行。由于WEBM视频格式，我无法在其他浏览器上进行测试，而且我无法以任何可用的格式创建视频（最后查看我的P.D.）。

所以，每次调用只需一步：-1或1.虽然看起来只有Firefox返回deltaMode的“像素”以外的任何内容。我使用这个fiddle进行测试......现在你可以专注于那个平滑的滚动鼠标并看到它发送每次调用的速度，这在这个特殊情况下真正重要（注意许多mac都有平滑的滚动软件或反向滚动）。

我已经评论了代码的每一行以及我对自己的修改，但可能对其他人有用。

// detect if browser firefox as it appears to be the only
//  browser that return deltaModes different than DOM_DELTA_PIXEL
//  Ref: https://stackoverflow.com/a/37474225/4146962
var FF = !(window.mozInnerScreenX == null);

// Function grabbed from the reference above
// It tries to read current line-height of document (for 'lines' deltaMode)
function getScrollLineHeight() {
    var r;
    var iframe = document.createElement('iframe');
    iframe.src = '#';
    document.body.appendChild(iframe);
    var iwin = iframe.contentWindow;
    var idoc = iwin.document;
    idoc.open();
    idoc.write('<!DOCTYPE html><html><head></head><body><span>a</span></body></html>');
    idoc.close();
    var span = idoc.body.firstElementChild;
    r = span.offsetHeight;
    document.body.removeChild(iframe);
    return r;
}

// html5 elements
var vid = document.getElementById("v"); // HTML5 video element
var canvas = document.getElementById("c"); // HTML5 canvas element
var context = canvas.getContext('2d'); // Canvas context
var momentum = document.getElementById('m'); // Current momentum display
var delta = document.getElementById('d'); // Current deltaMode display
var lineheight = document.getElementById('l'); // Current deltaMode display

// global variables
var ch = 120; // canvas with (could be window.innerHeight)
var cw = Math.round(ch * (16 / 9)); // 16/9 proportion width
var targetOffset = 0; // Video offset target position when scrolling

// deltaY to FPS coefficients (for fine tuning)
// Possible mouse scroll wheel 'event.deltaMode'
//  modes are: 0:'pixels', 1:'lines', 2:'page'
var pc = 1000; // 'pixels' deltaY coefficient
var lh = "disabled"; //getScrollLineHeight(); // get line-height of deltaMode 'lines'
lineheight.value = lh; // display current document line height
coefficient = 30;
var deltaModes = ['pixels', 'lines', 'page']; // For deltaMode display

// Sets canvas dimensions
canvas.width = cw;
canvas.height = ch;

// Pauses video (this also starts to load the video)
vid.pause();

// Listens video changes time position
vid.addEventListener('seeked', function() {
  // Updates canvas with current video frame
  context.drawImage(vid, 0, 0, cw, ch);
});

// Listens mouse scroll wheel
window.addEventListener('wheel', function(e) {

  // Don't do what scroll wheel normally does
  e.preventDefault();

  // You don't need an amount, just positive or negative value: -1, 1
  var deltabs = 1;
  if (e.deltaY<0) deltabs = -1;

  // Disable page scrolling, modes[e.deltaMode]=='page'
  if (e.deltaMode>1) return false;

	delta.value = deltaModes[e.deltaMode];
  // Normally scrolling this should be a subtraction 
  //   not a sum but "I like it like this!"
  // targetOffset = targetOffset + (e.deltaY / coefficient); // e.deltaY is the thing!!
  targetOffset = targetOffset + (deltabs/coefficient);

  // Shows current momentum
  momentum.value = targetOffset;

  return false;
});

// Updates canvas on a loop (both for play or pause state)
var renderLoop = function() {
  requestAnimationFrame(function() {

    // This parts updates canvas when video is paused
    // Needs 'seeked' listener above
    if (vid.paused || vid.ended) {

      // Reduce target offset gradually
      targetOffset = targetOffset * 0.9;
      // Show current momentum
      momentum.value = Math.round(targetOffset * 100) / 100;

      // this part joins start and end of video when scrolling
      // forward & backwards
      var vct = vid.currentTime - targetOffset;
      if (vct < 0) {
        vct = vid.duration + vct;
      } else if (vct > vid.duration) {
        vct = vct - vid.duration;
      }
      vid.currentTime = vct;

      // This parts updates canvas when video is playing
    } else {
      // update canvas with current video frame
      context.drawImage(vid, 0, 0, cw, ch);
    }

    renderLoop(); // Recursive call to loop
  });
};
renderLoop(); // Initial call to loop

input {
  width: 50px;
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

<h3>
  mouse scroll video
</h3>
<div class="row">
  <div class="column">
    <div>
      Video element:
    </div>
    <video controls height="120" id="v" tabindex="-1" autobuffer="auto" preload="auto">
      <source type="video/webm" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"/>
    </video>
  </div>
  <div class="column">
    <div>
      Canvas element:
    </div>
    <canvas id="c"></canvas>
    <div>
      Momentum: <input type=text id="m">
    </div>
    <div>
      deltaMode: <input type=text id="d">
    </div>
    <div>
      lineHeight: <input type=text id="l">
    </div>
  </div>
</div>

Pd积。我有一个问题（在其他地方解释得太具体了）......我已经用我自己的视频进行了测试并得到了非常糟糕的结果......为什么会这样？与特定视频编码设置有关？您知道FFMPEG转换为WEBM格式需要哪种编码cmd，例如您的示例中使用的视频吗？

Answer 4

我在Firefox中尝试过它并且无法与Chrome“性能”相媲美，因此您可以尝试添加this。

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 = Math.round(cw/1.7777);
canvas.width = cw;
canvas.height = ch;
var directionScroll = 0;
var targetOffset = 0;
// vid.pause();
vid.addEventListener('seeked', function() {
  context.drawImage(vid, 0, 0, cw, ch);
});

function normalizeDelta(wheelEvent) {
  var delta = 0;
  var wheelDelta = wheelEvent.wheelDelta;
  var deltaY = wheelEvent.deltaY;
  // CHROME WIN/MAC | SAFARI 7 MAC | OPERA WIN/MAC | EDGE
  if (wheelDelta) {
    delta = -wheelDelta / 120; 
  }
  // FIREFOX WIN / MAC | IE
  if(deltaY) {
    deltaY > 0 ? delta = 1 : delta = -1;
  }
  return delta;
}

window.addEventListener('wheel', function(e) {
  e.preventDefault();
  // Normally scrolling this should be a substraction 
  //   not a sum but "I like it like this!"
  targetOffset = targetOffset + normalizeDelta(e); // e.deltaY is the thing!!
  if (e.deltaY < 0) directionScroll = 1;
  if (e.deltaY > 0) directionScroll = -1;
  targetFrame.value = targetOffset;
  return false;
});

var renderLoop = function(){
  requestAnimationFrame( function(){
    context.drawImage(vid,0,0,cw,ch);
    if (vid.paused || vid.ended) {
      // setTimeout(function(){
      targetOffset = targetOffset*0.9;
      targetFrame.value=Math.round(targetOffset*100)/100;
      var vct = vid.currentTime-targetOffset;
      if (vct<0) {
        vct = vid.duration + vct;
      } else if (vct>vid.duration) {
        vct = vct - vid.duration;
      }
      vid.currentTime = vct;
      // }, 0);
    }
    renderLoop();
  });
};
renderLoop();

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
#c {
  border:1px solid black;
}

<h3>
  scroll up is forward
</h3>
<div class="row">
  <div class="column">
<div>
  Video element:
</div>
<video controls height="120" id="v" tabindex="-1" autobuffer="auto" preload="auto">
    <source type="video/webm" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
</video>
</div>
  <div class="column">
<div>
  Canvas element:
</div>
<canvas id="c"></canvas>
<div>
  Momentum: <input type=text id="t">
</div>
  </div>
</div>

参考：https://stackoverflow.com/a/49095733/9648076

如果删除了问题，答案就是：

private normalizeDelta(wheelEvent: WheelEvent):number {
  var delta = 0;
  var wheelDelta = wheelEvent.wheelDelta;
  var deltaY = wheelEvent.deltaY;
  // CHROME WIN/MAC | SAFARI 7 MAC | OPERA WIN/MAC | EDGE
  if (wheelDelta) {
    delta = -wheelDelta / 120; 
  }
  // FIREFOX WIN / MAC | IE
  if(deltaY) {
    deltaY > 0 ? delta = 1 : delta = -1;
  }
  return delta;
}