覆盖 Edge 上的触摸板滚动

Question

当您在 Edge 上使用 overflow: hidden 时，当您使用触摸板滚动时事件 mousewheel 似乎不再被触发（鼠标中键仍然有效）。此问题仅在使用 Edge 和 Internet Explorer 时出现。

以下脚本记录了每个 mousewheel 事件应该发生的滚动距离。（在使用 chrome 和 firefox 时有效）。

document.querySelector("#out").addEventListener("mousewheel", function(event) {
  if (event.defaultPrevented) return;
  if (event.shiftKey) {
    if (event.deltaX || event.deltaY) {
      move(0, event.deltaX || event.deltaY);
      event.preventDefault();
    }
    return;
  }
  console.log(event.deltaY, event.deltaX);
  event.preventDefault();
}, {
  passive: false
});

#out {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

<div id="out">
  <div id="in">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis tortor ultricies nibh mollis scelerisque. Proin eget mauris sollicitudin, eleifend lorem nec, aliquam justo. Pellentesque commodo ante nec finibus porta. Nam lobortis tempus ultrices. Ut ultrices, enim eget sodales eleifend, enim ipsum tincidunt nisl, ut tempor justo ante non nisi. Etiam ut ex non justo pellentesque posuere. Nulla sollicitudin massa viverra sapien congue, quis faucibus nisl aliquam. Duis ac fringilla eros. Vestibulum pretium, sem pulvinar consectetur ornare, urna justo vestibulum ligula, ullamcorper dignissim lectus velit quis turpis. Proin eu risus justo. Sed at nibh ac tortor rutrum mollis sagittis bibendum leo. Nunc feugiat mauris nec volutpat vestibulum. Phasellus ultricies, lacus sit amet posuere dapibus, nibh ligula pellentesque ligula, vitae congue massa ipsum sit amet velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel aliquet enim. Donec in lorem consequat, ullamcorper lectus sed, consectetur augue.
  </div>
</div>

Answer 1

这是一个您可以找到的已知问题 here. From the response of the Microsoft Edge Team in the issue tracker, we could see that the issue has been solved now by implementing PTP Pointer Events as outlined in this blog post。

您可以像下面这样使用指针事件：

In HTML, add the touch-action CSS property to your target element to prevent the browser from executing its default touch behavior in response to gestures:

<canvas height=400 width=400 id="canvas" style="touch-action: none;"></canvas>

In JavaScript, attach a Pointer Event listener to your target element. You can determine the type of pointer that caused the handler to be invoked using the pointerType property of the event object passed into the event listener callback:

document.getElementById('canvas').addEventListener('pointermove', function(event) {
    console.log('pointermove!');
});

有关指针事件的更多信息，您可以参考this doc。

覆盖 Edge 上的触摸板滚动

Override touch-pad scrolling on Edge

javascript

mouseevent

microsoft-edge