使用IE11的Surface Pro 3上沒有鼠標滾輪事件嗎？

Question

看來Windows 8.1上的IE11不會發送來自精密觸摸板上的多點觸摸滾動的鼠標滾輪事件，就像新Surface Pro 3的Type Cover上的鼠標滾輪事件一樣。我可以聽其他替代事件嗎？ 實際的滾動事件將不起作用，因為我正在通過捕獲輸入來模擬畫布應用程序中的滾動區域。

Answer 1

這是一個錯誤。 在解決之前，沒有解決方法。 我可以確認它可以在Synaptics觸摸板和鼠標輪上進行兩指滾動，但不能在精密觸摸板上（例如Surface Type Cover 3或4，或Surface Book）上正常工作。 這僅是Microsoft Edge＆Internet Explorer的問題。 Chrome和Firefox都將精確觸摸板2指滾動與其他任何觸摸板的2指滾動完全一樣。

這是下面用於測試/驗證的代碼的jsfiddle：

JS：

(function($) {
  var $bg = $('.bg'),
    $log = $('.log'),
    xPos = 0;

  // Define wheel event handler:
  function onWheelEvent(e) {
    // Prevent default behavior of scrolling the web page:
    e.preventDefault();
    e.stopPropagation();

    // Determin the wheel's vertical scroll delta:
    var wheelDeltaY = 0;
    if ('deltaY' in e) {
      if (e.deltaMode === 1) {
        wheelDeltaY = ((Math.abs(e.deltaY) < 6) ? e.deltaY * -2 : -e.deltaY) * 20;
      } else {
        wheelDeltaY = -e.deltaY;
      }
    } else if ('wheelDeltaY' in e) {
      wheelDeltaY = e.wheelDeltaY / 120 * 20;
    } else if ('wheelDelta' in e) {
      wheelDeltaY = e.wheelDelta / 120 * 20;
    } else if ('detail' in e) {
      wheelDeltaY = -e.detail / 3 * 20;
    } else {
      $log.append('<p>unable to determine delta</p>');
    }
    xPos = xPos + Math.round(wheelDeltaY);
    $bg.css('background-position', xPos + 'px 0px');
    $log.append('<p>' + e.type + ' event scrolled by ' + wheelDeltaY + 'px. New X position: ' + xPos + '</p>');
    $log.scrollTop($log[0].scrollHeight);
  };
  // Capture wheel events for all browsers 
  //   (I'm not using jQuery's event subscription 
  //    model to show it's not a jQuery problem):
  $bg[0].addEventListener('wheel', onWheelEvent, false);
  $bg[0].addEventListener('mousewheel', onWheelEvent, false);
  $bg[0].addEventListener('DOMMouseScroll', onWheelEvent, false);
})($);

HTML：

<div class="tall">
  <!-- Force browser to show scroll bars -->
  <div class="bg">
    <!--BG image we'll move horizontally -->
    <div class="log">
      <!--Contain the event log-->
      <h3>Scroll with mouse wheel or 2-finger scrolling here</h3>
      <p>
        Expected behavior: The background image (which is large and may take a minute to load) should shift horizontally when scrolling over the image, even though the page is tall enough to have a browser-created vertical scrollbar.
      </p>
      <p>
        If you scroll the mouse over this image, and the page scrolls vertically (and this text isn't replaced with an event log), it means the event was not captured.
      </p>
    </div>
  </div>
</div>

CSS：

.tall {
  height: 2000px;
}

.bg {
  width: 100%;
  height: 300px;
  background-image: url(http://i.imgur.com/DP6K9D8.gif);
  background-position: 0px 0px;
  background-repeat: repeat;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-size: contain;
  position: relative;
}

.log {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40%;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.85);
  color: #555;
  max-height: 260px;
  overflow: hidden;
  font-size: 0.7em;
  font-family: arial, sans-serif;
}