使用IE11的Surface Pro 3上没有鼠标滚轮事件吗？

Question

It appears that IE11 on Windows 8.1 doesn't send mousewheel events from multitouch scrolling on precision touchpads, like the one on the Type Cover for the new Surface Pro 3. Is there some alternative event I could listen to? The actual scroll event won't work, as I'm emulating a scrolling area in my canvas application by capturing inputs.

Answer 1

This a bug. There is no work-around until it's fixed. I can confirm it works properly with 2-finger scrolling on Synaptics touchpads and mouse wheels, but not precision touchpads (like in the Surface Type Cover 3, or 4, or the Surface Book). This is only a problem for Microsoft Edge & Internet Explorer. Chrome and Firefox both treat precision touchpad 2-finger scrolling exactly the same as any other touchpad's 2-finger scrolling.

Here is a jsfiddle of the code below to test/verify:

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