Highcharts mousewheel scroll event in firefox

Question

I have a Highcharts component with a mousewheel scroll event.

Everything is working fine in all browsers except firefox. In firefox, the mousewheel event triggers the scroll in both the Highcharts component and the entire window. I tried to add event.preventDefault() and event.stopPropagation() but that did not fix the issue. Is there a way to prevent the entire window from scrolling when scrolling the Highcharts component?

Answer 1

Your problem occurs because the DOMMouseScroll and mousewheel events are now deprecated, and replaced by new wheel event, which works in all browsers. You need to replace two things in your code in order to make it work.

First of all, please change the event name here:

H.addEvent(chart.container, 'wheel', function(event) {

And then in your wheel event functions body replace the delta assignment to:

delta = e.detail || -(e.deltaY / 120);
delta = delta < 0 ? 1 : -1;

Now it works in the same way on all browsers.

Live example: http://jsfiddle.net/d3r8pb7c/

API Reference:

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll