Question

Windows 8.1上的IE11似乎不会从精确触摸板上的多点触控滚动发送鼠标滚轮事件，就像新版Surface Pro 3的Type Cover上的那样。是否有一些我可以听的替代事件？实际的滚动事件不起作用，因为我通过捕获输入在我的画布应用程序中模拟滚动区域。

Answer 1

这是一个错误。在修复之前没有解决方法。我可以通过Synaptics触摸板和鼠标滚轮上的双指滚动来确认它是否正常工作，但不是精确触摸板（例如Surface Type Cover 3，或4，或Surface Book）。这只是Microsoft Edge＆amp; S的问题。 IE浏览器。 Chrome和Firefox都将精确触摸板双指滚动视为与任何其他触控板的双指滚动完全相同。

Here是下面代码的一个小问题，用于测试/验证：

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

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

1 个答案: