Mousewheel & dommousescroll event in IE & Edge

Question

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.

depending on which sort of information you are receiving from the scroll event, you can combine/replace it with `touchstart`, `touchend`, `touchmove` events. See [mozilla docs](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) for more details — Anton Boritskiy, Feb 09 '17 at 09:38

Jaqen H'ghar · Accepted Answer · 2017-02-06T21:05:05.260

16

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

edited Feb 06 '17 at 21:05

answered Feb 06 '17 at 12:27

Jaqen H'ghar

16,186
8
49
52

Hodor haha nice... but sorry still not working in IE(11.576.14393.0) & Edge(14.14393) on the dell xps 13 9343 – Mart Feb 06 '17 at 15:08
1

Yup. I opened that issue ages ago. Spoken to many Edge PMs in person and over social media. They do not seem to want to fix it. It now affects the Windows 10 Creator's Update's new on-screen trackpad too, as the OS treats it like a virtual Precision Touchpad. New issue opened here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10523255/ – BTC Feb 15 '17 at 01:06
Is there any reason why your code snippet would get fired events but when I add the wheel event listener in exactly the same way with a simple console.log in callback in my app, it does not fire? – Colin D Mar 24 '17 at 20:25
@ColinD not really sure.. I guess its not a precision touchpad issue as the OP had because my snippet wouldnt have worked for you also it that case.. in what browsers your log doesnt seem to work? can you make a snippet i will take a look – Jaqen H'ghar Mar 24 '17 at 22:04
Appreciate the response. I'll see if I can make a reproducible example. Only in Edge currently is it failing though – Colin D Mar 28 '17 at 19:55

score 1 · Answer 2 · answered Jul 03 '18 at 17:04

1

Staring EdgeHTML 17, Microsoft supports Pointer Events to solve the issue.

https://blogs.windows.com/msedgedev/2017/12/07/better-precision-touchpad-experience-ptp-pointer-events/

As of today, pointer events are supported by all major browsers except Safari:

https://caniuse.com/#search=pointer

answered Jul 03 '18 at 17:04

Hamed

1,351
9
23

Woah. Thanks for this. I was about to rewrite everything using a "secret" scrollbar somewhere just to get that `'wheel'` to work. – Mathias Mar 07 '20 at 15:56

score 0 · Answer 3 · answered Feb 06 '17 at 14:11

0

Some older IE version doesn't support addEventListener, they support attachEvent instead.

Try a crossBrowser addEventListener:

if ( window.attachEvent ) {
 window.attachEvent('on'+eventType, yourHandler); // in your case "scroll"
} else {
 window.addEventListener ...
}

Pay attention to the page height: it won't work if there is no offset. If there is no offset in your page, then use this:

document.attachEvent('onmousewheel', mouseWheelEvent); // the event is attached to document

answered Feb 06 '17 at 14:11

misterwolf

424
4
14

Thanks for the suggestion, but not working in IE(11.576.14393.0) & Edge(14.14393) on the dell xps 13 9343 – Mart Feb 06 '17 at 15:08
it's strange because I used the version you noted me. Btw, I have two installations of IE: one is "Microsoft EdgeHTML 14.14393, Microsoft Edge 38.14393.0.0", and in this versino attachEvent doesn't work, the other IE version is: 11.576.14.393.0 and here the trick works well. @Mart, let me know when you'll resolve the trick, I am curios! :) – misterwolf Feb 06 '17 at 16:14

Mousewheel & dommousescroll event in IE & Edge

3 Answers3

Linked