CODEWITHSUNDEEP
javascriptmouseeventmicrosoft-edge
nick zoum
nick zoum

Reputation: 7305

Override touch-pad scrolling on Edge

It appears that when you are using overflow: hidden on Edge the event mousewheel no longer gets triggered when you use the touch-pad to scroll (middle button of mouse still works). This problem only appears when using Edge and Internet Explorer.

The following script logs the scrolling distances that should occur with each mousewheel event. (Works when using chrome and 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>

Upvotes: 0

Views: 345

Answers (1)

Yu Zhou
Yu Zhou

Reputation: 12971

It's a known issue that you could find 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.

You could use the Pointer Events like below:

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!');
});

For more information about Pointer Events, you could refer to this doc.

Upvotes: 1

Related Questions