覆盖 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。从 Microsoft Edge 团队在问题跟踪器中的响应中，我们可以看到问题现在已通过实施 this blog post 中所述的 PTP 指针事件 得到解决。

您可以使用如下指针事件：

在 HTML 中，将 touch-action CSS 属性添加到您的目标元素，以防止浏览器执行其默认的触摸行为以响应手势：

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

在 JavaScript 中，将指针事件侦听器附加到您的目标元素。您可以使用传递给事件侦听器回调的事件对象的 pointerType 属性来确定导致调用处理程序的指针类型：

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

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