Login/Register
Mousewheel & dommousescroll event in IE & Edge
Asked Answered
Solved javascriptinternet-explorermouseeventmulti-touchmicrosoft-edge
F

3

17

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.

Faa answered 2/2, 2017 at 21:30 Comment(1)
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 for more details – Archetype
C
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

Cioban answered 6/2, 2017 at 12:27 Comment(5)
Hodor haha nice... but sorry still not working in IE(11.576.14393.0) & Edge(14.14393) on the dell xps 13 9343 – Faa
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: developer.microsoft.com/en-us/microsoft-edge/platform/issues/… – Sewer
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? – Gatto
@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 – Ula
Appreciate the response. I'll see if I can make a reproducible example. Only in Edge currently is it failing though – Gatto
T
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

Tipi answered 3/7, 2018 at 17:4 Comment(1)
Woah. Thanks for this. I was about to rewrite everything using a "secret" scrollbar somewhere just to get that 'wheel' to work. – Sivan
V
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
Voluptuary answered 6/2, 2017 at 14:11 Comment(2)
Thanks for the suggestion, but not working in IE(11.576.14393.0) & Edge(14.14393) on the dell xps 13 9343 – Faa
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! :) – Voluptuary

© 2022 - 2024 — McMap. All rights reserved.