Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mousewheel & dommousescroll event in IE & Edge

I have this code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script>
    window.addEventListener('DOMMouseScroll', mouseWheelEvent);
    window.addEventListener('mousewheel', mouseWheelEvent);

    function mouseWheelEvent() {
        alert(1);
    }
</script>
</body>
</html>

It works in Chrome & Firefox. However, it doesn't work with my laptop dell xps 13 9434's touchpad in IE & edge. But it does work with (some) other laptops' touchpads. What to do? jQuery is no problem.

"what doesn't work?" => There is no alert in scroll when using 2 fingers like you use to scroll in browsers.

like image 956
Mart Avatar asked Feb 02 '17 21:02

Mart


People also ask

What is Mousewheel event?

The obsolete and non-standard mousewheel event is fired asynchronously at an Element to provide updates while a mouse wheel or similar device is operated.

What is Mousewheel JS?

About Mousewheel JS Mousewheel is a jQuery plugin that adds cross-browser mouse wheel support. Also, Scroll distance can be measured using Delta normalization.

What is the wheel on a mouse called?

The scroll wheel that is located in the middle of the mouse is used to scroll up and down on any page without using the vertical scroll bar on the right hand side of a document or webpage. The scroll wheel can also be used as a third button on the mouse.


1 Answers

Edit

After some research it seems that the problem is actually Microsoft's.

There is an open issue about it in EdgeHTML issue tracker for almost one year already.

Basically it says that wheel events do not work in Edge (And older IE versions) when using Precision Touchpads.

By the way I dont delete the rest of the answer as it is still relevant. You should use wheel instead anyway.


You should listen to wheel:

window.addEventListener('wheel', mouseWheelEvent);

It has replaced both mousewheel and DOMMouseScroll which are deprecated by now and is supported by all browsers.


Cross browser example:

window.addEventListener('wheel', mouseWheelEvent);   

function mouseWheelEvent() {
    console.log("Fired");
}
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>

And JSFiddle demo

like image 115
Jaqen H'ghar Avatar answered Sep 21 '22 17:09

Jaqen H'ghar